{% extends 'base.html.twig' %}

{% block title %} Gestion des organisations {% endblock %}

{% block body %}
    <div class="w-100 h-100 p-5 m-auto">
        {% for type, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ type }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}
        <div class="card no-header-bg p-3 m-3 border-0"
             data-controller="organization"
        >
            <div class="card-header d-flex justify-content-between align-items-center  border-0">
                <div class="card-title">
                    <h1>Gestion des organisations</h1>
                </div>

                {% if is_granted("ROLE_SUPER_ADMIN") %}
                    <button type="button" class="btn btn-primary" data-action="click->organization#openCreateModal">
                        Créer une organisation
                    </button>
                {% endif %}

                {#                New organization modal #}
                <div class="modal fade" id="createOrganizationModal" tabindex="-1" aria-labelledby="createOrganizationModalLabel"
                     aria-hidden="true"
                     data-organization-target="modal">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="createOrganizationModalLabel">Créer une organisation</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <form data-action="submit->organization#createOrganization">
                                    <div class="mb-3">
                                        <label for="organizationName" class="form-label">Nom de l'organisation</label>
                                        <input type="text" class="form-control" id="organizationName" name="name" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="organizationEmail" class="form-label">Email</label>
                                        <input class="form-control" id="organizationEmail" type="email" name="email" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="organizationPhone" class="form-label">Téléphone</label>
                                        <input class="form-control" type="number" id="organizationPhone" name="phone">
                                    </div>
                                    <div class="mb-3">
                                        <label for="organizationAddress" class="form-label">Adresse</label>
                                        <input class="form-control" id="organizationAddress" name="address">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="organizationLogo">Logo de l'organisation</label>
                                        <input type="file" name="logoUrl" id="organizationLogo" class="form-control"
                                               accept="image/*">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                            Annuler
                                        </button>
                                        <button type="submit" class="btn btn-primary">Créer l'organisation</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <div class="card-body">
                    {% if is_granted('ROLE_SUPER_ADMIN') and not hasOrganizations %}

                        <div class="div text-center my-5 py-5">
                            <h1 class="my-5 ty-5"> Aucune organisation trouvée. </h1>
                            <a href="{{ path('organization_create') }}" class="btn btn-primary">Créer une
                                organisation</a>
                        </div>

                    {% else %}

                        <div id="tabulator-org"
                             data-controller="organization"
                             data-organization-table-value="true"
                             data-organization-user-value="{{ app.user.getId() }}"
                             data-organization-sadmin-value="{{ is_granted('ROLE_SUPER_ADMIN') ? true : false }}">
                        </div>

                    {% endif %}
                </div>
            </div>
        </div>

{% endblock %}