<ul class="demandes-list" aria-label="Liste des demandes de prêt">
    {% for demande in demandes %}
        <li class="demande-item">
            <div class="demande-header">
                <h2 class="demande-title">
                    <a href="#demande-{{loop.counter0}}" class="demande-link" aria-controls="demande-{{loop.counter0}}-content">
                        <span class="demande-ref">{{demande.titre_demande}}</span>
                        <span class="demande-date">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                            <span>{{demande.date_demande | strftime '%d/%m/%Y' }}</span>
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <span>{{demande.deadline_demande | strftime '%d/%m/%Y'}}</span>
                        </span>
                        {% if demande.linkedRecord %}
                            <div class="card status-card">
                                <div class="card-body">
                                    <p class="card-text">{{ msg.linked_notice }}</p>
                                </div>
                            </div>
                        {% endif %}
                        {% for statut in demande.liste_etat %}
                            {% if statut.id == demande.etat_demande %}
                                <div class="card status-card status-{{ statut.name }}">
                                    <div class="card-body">
                                        <p class="card-text">{{ statut.comment }}</p>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <progress id="demande-progress-{{demande.id_demande}}" class="demande-progress" value="{{ demande.progression }}" max="100"></progress>
                        <label for="demande-progress-{{demande.id_demande}}" class="demande-progress-label">{{ demande.progression }}%</label>
                        <span class="demande-notification">
                            {% if demande.dmde_read_opac == 1 %}
                                <span class="demande-notification" data-new="true" data-num-demande="{{ demande.id_demande }}">
                                    <img title="" class="img_plus" src="{{ img.notification_new.png }}" />
                                </span>
                            {% endif %}
                        </span>
                        <span class="demande-arrow" aria-hidden="true"><i class="fa fa-chevron-up" aria-hidden="true"></i></span>
                    </a>
                </h2>
            </div>
            <div id="demande-{{loop.counter0}}-content" class="demande-content" hidden>
                <div class="demande-details">
                    <a href="./empr.php?tab=request&amp;lvl=list_dmde&amp;sub=open_demande&amp;iddemande={{demande.id_demande}}" class="demande-details-link">{{ msg.demandes_see_demande }}</a>
                    <p><strong>{{msg.demandes_theme}} :</strong> {{demande.theme_libelle}}</p>
                    <p><strong>{{msg.demandes_etat}} :</strong> {{demande.etatComment}}</p>
                    <p><strong>{{msg.demandes_date_dmde}} :</strong> {{demande.date_demande | strftime '%d/%m/%Y'}}</p>
                    <p><strong>{{msg.demandes_sujet}} :</strong> {{demande.sujet_demande}}</p>
                    <p><strong>{{msg.demandes_date_prevue}} :</strong> {{demande.date_prevue | strftime '%d/%m/%Y'}}</p>
                    <p><strong>{{msg.demandes_type}} :</strong> {{ demande.type_libelle }}</p>
                    <p><strong>{{msg.demandes_attribution}} :</strong>
                        {% for user in demande.users %}
                            {{ user.nom }}
                        {% endfor %}
                    </p>
                    <p><strong>{{msg.demandes_date_butoir}} :</strong> {{demande.deadline_demande | strftime '%d/%m/%Y'}}</p>
                    <p><strong>{{msg.demandes_progression}} :</strong> {{demande.progression}} %</p>
                    {% if demande.linkedRecord %}
                        <p>
                            <strong>{{msg.demandes_linked_record}} :</strong>
                            <a href='{{ demande.linkedRecord.permalink }}' title='{{ demande.linkedRecord.tit1 }}'>{{ demande.linkedRecord.tit1 }}</a>
                        </p>
                    {% endif %}
                </div>
                {% if demande.actions %}
                    <div class="demande-actions">
                        <div class="actions-header-demandes">
                            <h3 class="actions-title-demandes">{{msg.demandes_action_liste}}</h3>
                        </div>
                        <ul class="actions-list-demandes" aria-label="{{ msg.demandes_action_liste }}">
                            {% for action in demande.actions %}
                                <li class="action-item-demandes">
                                    <div class="action-type-demandes-{{action.type_action}}">
                                        <span class="action-icon-demandes" aria-hidden="true">
                                            <img src="{{action.actionIcon}}" alt="{{action.actionTypeComment}}">
                                        </span>
                                        <span class="action-title">{{action.actionTypeComment}}</span>
                                    </div>
                                    <div class="action-date-demandes">{{action.date_action | strftime '%d/%m/%Y'}}</div>
                                    <div class="action-statut">
                                        {% for statut in action.list_statut %}
                                            {% if statut.id == action.statut_action %}
                                                <div class="card status-card status-{{ statut.name }}">
                                                    <div class="card-body">
                                                        <p class="card-text">{{ statut.comment }}</p>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    {% if action.explnums %}
                                        <div class="card status-card">
                                            <div class="card-body">
                                                <p class="card-text">{{ msg.docnum }}</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                    <div class="action-details-demandes">
                                        <p class="action-description-demandes">{{action.sujet_action}}</p>
                                    </div>
                                    <progress id="action-progress-{{action.id_action}}" class="action-progress" value="{{action.progression_action}}" max="100"></progress>
                                    <label for="action-progress-{{action.id_action}}" class="action-progress-label">{{action.progression_action}}%</label>

                                    <span class="action-notification">
                                        {% if action.actions_read_opac == 1 %}
                                            <img title="" class="img_plus" src="{{ img.notification_new.png }}" />
                                        {% endif %}
                                    </span>

                                    <a href="./empr.php?tab=request&amp;lvl=list_dmde&amp;sub=open_demande&amp;iddemande={{demande.id_demande}}&amp;last_modified={{action.id_action}}" class="action-link">{{ msg.demandes_see_action }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            </div>
        </li>
    {% endfor %}
</ul>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Sélectionner tous les liens de demande
        document.querySelectorAll('.demande-header').forEach((link, index) => {
            const content = link.nextElementSibling;

            // Initialiser l'état
            link.setAttribute('aria-expanded', 'false');
            content.hidden = true;

            // Gérer le clic
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const isExpanded = this.getAttribute('aria-expanded') === 'true';

                // Mettre à jour l'état
                this.setAttribute('aria-expanded', !isExpanded);
                content.hidden = isExpanded;

                // Mettre à jour la flèche
                const arrow = this.querySelector('.demande-arrow');
                arrow.style.transform = !isExpanded ? 'rotate(180deg)' : 'rotate(0)';

                //On passe la demande en lue
                var done = false;
                link.querySelectorAll('.demande-notification').forEach(demande => {
                    if(demande.getAttribute('data-new') === 'true') {
                        if(! done) {
                            const id_demande = demande.getAttribute('data-num-demande');
                            const req = new http_request();
                            req.request('./ajax.php?module=ajax&categ=demandes&quoifaire=change_read&id_demande='+id_demande);
                            done = true;
                        }
                        demande.setAttribute('data-new', 'false');
                    }
                });
            });
        });
    });
</script>