{% if is_granted('ROLE_DIRECTION') %}
    {% set notifications = notifications_direction() %}
    <div class="app-navbar-item ms-1 ms-lg-3">
        <div class="btn btn-icon btn-custom btn-color-gray-600 btn-active-color-primary w-35px h-35px w-md-40px h-md-40px position-relative" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
            <i class="ki-outline ki-notification-status fs-1"></i>
            {% if notifications.total() > 0 %}
                <span class="badge badge-circle badge-danger position-absolute top-0 start-100 translate-middle" style="font-size: 0.65rem;">{{ notifications.total() }}</span>
            {% endif %}
        </div>
        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-350px" data-kt-menu="true">
            {% if notifications.total() == 0 %}
                <div class="menu-item px-5 py-3 text-muted">Rien à traiter pour le moment.</div>
            {% else %}
                {% if notifications.messagesNonTraites is not empty %}
                    <div class="menu-item px-5 pt-3 pb-1"><span class="fw-bold text-muted fs-8 text-uppercase">Messages non traités</span></div>
                    {% for message in notifications.messagesNonTraites %}
                        <a href="{{ path('equipe_messages_fil', {conversationId: message.conversation.id}) }}" class="menu-item px-5 py-2 d-block text-gray-800">
                            <div class="d-flex align-items-center gap-2">
                                <strong>{{ message.enfant.prenom }} {{ message.enfant.nom }}</strong>
                                {% if message.priorite.value == 'urgente' %}<span class="badge badge-light-danger">Urgent</span>{% endif %}
                            </div>
                            <div class="text-muted fs-7">{{ message.contenu|slice(0, 60) }}{% if message.contenu|length > 60 %}…{% endif %}</div>
                        </a>
                    {% endfor %}
                {% endif %}
                {% if notifications.autorisationsEnAttente is not empty %}
                    <div class="menu-item px-5 pt-3 pb-1"><span class="fw-bold text-muted fs-8 text-uppercase">Autorisations en attente</span></div>
                    {% for personne in notifications.autorisationsEnAttente %}
                        {% if personne.enfant.groupe %}
                            <a href="{{ path('equipe_presences_groupe', {groupeId: personne.enfant.groupe.id}) }}" class="menu-item px-5 py-2 d-block text-gray-800">
                                <strong>{{ personne.prenom }} {{ personne.nom }}</strong>
                                <div class="text-muted fs-7">pour {{ personne.enfant.prenom }} {{ personne.enfant.nom }} - {{ personne.type.label }}</div>
                            </a>
                        {% else %}
                            <div class="menu-item px-5 py-2">
                                <strong>{{ personne.prenom }} {{ personne.nom }}</strong>
                                <div class="text-muted fs-7">pour {{ personne.enfant.prenom }} {{ personne.enfant.nom }} - {{ personne.type.label }}</div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                {% if notifications.autorisationsPonctuellesDuJour is not empty %}
                    <div class="menu-item px-5 pt-3 pb-1"><span class="fw-bold text-muted fs-8 text-uppercase">Autorisations ponctuelles du jour</span></div>
                    {% for personne in notifications.autorisationsPonctuellesDuJour %}
                        <div class="menu-item px-5 py-2 d-flex align-items-center justify-content-between gap-2">
                            {% if personne.enfant.groupe %}
                                <a href="{{ path('equipe_presences_groupe', {groupeId: personne.enfant.groupe.id}) }}" class="d-block text-gray-800 flex-grow-1">
                                    <strong>{{ personne.prenom }} {{ personne.nom }}</strong>
                                    <div class="text-muted fs-7">pour {{ personne.enfant.prenom }} {{ personne.enfant.nom }} - à titre indicatif, déjà validée</div>
                                </a>
                            {% else %}
                                <div class="flex-grow-1">
                                    <strong>{{ personne.prenom }} {{ personne.nom }}</strong>
                                    <div class="text-muted fs-7">pour {{ personne.enfant.prenom }} {{ personne.enfant.nom }} - à titre indicatif, déjà validée</div>
                                </div>
                            {% endif %}
                            <form method="post" action="{{ path('equipe_notifications_masquer_autorisation_ponctuelle', {id: personne.id}) }}">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('masquer_autorisation_ponctuelle_' ~ personne.id) }}">
                                <button type="submit" class="btn btn-icon btn-active-color-primary" style="width: 32px; height: 32px; font-size: 1.25rem;" title="Marquer comme vu">&times;</button>
                            </form>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endif %}