{% extends '@App/app.html.twig' %}

{% block title %}Demande {{ request.reference }}{% endblock %}

{% block page_header %}{% endblock %}

{% block content %}
{% set history = history|default([]) %}
{% set team_calendar = team_calendar|default({days: [], rows: [], conflict_count: 0, conflicts: []}) %}
{% set status_labels = status_labels|default({
    draft: 'Brouillon',
    submitted: 'Soumise',
    pending_manager: 'Att. manager',
    pending_rh: 'Att. RH',
    approved: 'Approuvée',
    refused: 'Refusée',
    cancelled: 'Annulée',
    cancel_requested: 'Annulation demandée',
    expired: 'Expirée'
}) %}
{% set balance_current = balance_current|default(null) %}
{% set balance_after = balance_after|default(null) %}
{% set status_tones = {
    draft: 'muted',
    submitted: 'info',
    pending_manager: 'warning',
    pending_rh: 'warning',
    approved: 'success',
    refused: 'muted',
    cancelled: 'muted',
    cancel_requested: 'warning',
    expired: 'muted'
} %}
{% set status_label = status_labels[request.status]|default(request.status|replace({'_': ' '})|capitalize) %}
{% set status_tone = status_tones[request.status]|default('muted') %}
{% set day_names = {1: 'Lundi', 2: 'Mardi', 3: 'Mercredi', 4: 'Jeudi', 5: 'Vendredi', 6: 'Samedi', 7: 'Dimanche'} %}
{% set salarie = request.salarie %}
{% set manager = request.manager %}
{% set salarie_photo = salarie.photo ? salarie.photo|trim : null %}
{% set salarie_avatar = salarie_photo ? (salarie_photo starts with 'http://' or salarie_photo starts with 'https://' ? salarie_photo : asset(salarie_photo starts with '/' ? salarie_photo|slice(1) : salarie_photo)) : null %}
{% set salarie_initials = ((salarie.prenom|default('')|first) ~ (salarie.nom|default('')|first))|upper ?: 'S' %}
{% set manager_photo = manager and manager.photo ? manager.photo|trim : null %}
{% set manager_avatar = manager_photo ? (manager_photo starts with 'http://' or manager_photo starts with 'https://' ? manager_photo : asset(manager_photo starts with '/' ? manager_photo|slice(1) : manager_photo)) : null %}
{% set manager_initials = manager ? (((manager.prenom|default('')|first) ~ (manager.nom|default('')|first))|upper ?: 'M') : 'M' %}
{% set can_validate = request.status in ['submitted', 'pending_manager', 'pending_rh'] and is_granted('LEAVE_APPROVE', request) %}
{% set can_refuse = request.status in ['submitted', 'pending_manager', 'pending_rh'] and is_granted('LEAVE_REFUSE', request) %}
{% set can_edit = is_granted('LEAVE_EDIT', request) %}
{% set can_submit = request.status in ['draft', 'refused'] and is_granted('LEAVE_SUBMIT', request) %}
{% set can_cancel = request.status not in ['cancelled', 'approved'] and is_granted('LEAVE_CANCEL', request) %}
{% set back_route = is_granted('LEAVE_VIEW_ALL') ? 'app_leave_index' : 'app_leave_my' %}

<div class="detail-page data-page" data-controller="leave-detail">
    <div class="detail-page__header">
        <div class="detail-page__title">
            <nav class="data-breadcrumb" aria-label="Fil d'Ariane">
                <a class="text-black" href="{{ path('app_leave_management') }}">Congés</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <a class="text-black" href="{{ path('app_leave_index') }}">Demandes</a>
                <i class="ti ti-chevron-right" aria-hidden="true"></i>
                <span class="text-muted">Demande {{ request.reference }}</span>
            </nav>
            <h1>
                Demande {{ request.reference }}
                <span class="data-badge data-badge--{{ status_tone }}"><i aria-hidden="true"></i>{{ status_label }}</span>
            </h1>
        </div>
        <div class="detail-page__actions">
            <a class="data-button data-button--secondary" href="{{ path(back_route) }}">
                <i class="ti ti-arrow-left" aria-hidden="true"></i>Retour liste
            </a>
        </div>
    </div>

    <section class="detail-card">
        <div class="detail-summary">
            <div class="detail-summary__main">
                <div class="detail-field">
                    <span class="detail-field__label">Salarié</span>
                    <span class="detail-person mt-2">
                        <span class="data-avatar {{ salarie_avatar ? '' : 'data-avatar--initials' }}">
                            {% if salarie_avatar %}
                                <img src="{{ salarie_avatar }}" alt="{{ salarie }}">
                            {% else %}
                                {{ salarie_initials }}
                            {% endif %}
                        </span>
                        <span>
                            <span class="detail-person__name">{{ salarie }}</span>
                            <span class="detail-person__meta">{{ salarie.employeeService|default(salarie.service|default('Service non renseigné')) }} · {{ salarie.typeCollaborateur|default('Salarié') }}</span>
                        </span>
                    </span>
                </div>
                <div class="detail-field">
                    <span class="detail-field__label">Manager</span>
                    {% if manager %}
                        <span class="detail-person mt-2">
                            <span class="data-avatar {{ manager_avatar ? '' : 'data-avatar--initials' }}">
                                {% if manager_avatar %}
                                    <img src="{{ manager_avatar }}" alt="{{ manager }}">
                                {% else %}
                                    {{ manager_initials }}
                                {% endif %}
                            </span>
                            <span>
                                <span class="detail-person__name">{{ manager }}</span>
                                <span class="detail-person__meta">{{ manager.employeeService|default(manager.service|default('Manager')) }}</span>
                            </span>
                        </span>
                    {% else %}
                        <strong class="detail-field__value">Non renseigné</strong>
                    {% endif %}
                </div>
                <div class="detail-field">
                    <span class="detail-field__label">Type de congé</span>
                    <span class="data-badge data-badge--info mt-2">{{ request.leaveType.nom }}</span>
                </div>
                <div class="detail-field">
                    <span class="detail-field__label">Durée</span>
                    <strong class="detail-field__value">{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} jours ouvrés</strong>
                </div>
                <div class="detail-field">
                    <span class="detail-field__label">Date de début</span>
                    <strong class="detail-field__value">{{ request.startDate|date('d/m/Y') }}</strong>
                </div>
                <div class="detail-field">
                    <span class="detail-field__label">Date de fin</span>
                    <strong class="detail-field__value">{{ request.endDate|date('d/m/Y') }}</strong>
                </div>
            </div>
            <div class="detail-summary__aside">
                <div class="detail-balance-grid">
                    <div class="detail-balance">
                        <span>Solde actuel</span>
                        <strong>{{ balance_current is not null ? balance_current|number_format(1, ',', ' ') : '—' }}{% if balance_current is not null %} j{% endif %}</strong>
                        <small>Avant validation</small>
                    </div>
                    <div class="detail-balance detail-balance--success">
                        <span>Solde après validation</span>
                        <strong>{{ balance_after is not null ? balance_after|number_format(1, ',', ' ') : '—' }}{% if balance_after is not null %} j{% endif %}</strong>
                        <small>Si approuvée</small>
                    </div>
                </div>
                <div class="detail-notice">
                    <i class="ti ti-info-circle" aria-hidden="true"></i>
                    <span>
                        {% if request.status in ['submitted', 'pending_manager', 'pending_rh'] %}
                            En attente de validation{% if manager %} par {{ manager }}{% endif %}. Soumise le {{ request.submittedAt ? request.submittedAt|date('d/m/Y') : request.createdAt|date('d/m/Y') }}.
                        {% elseif request.status == 'approved' %}
                            Demande approuvée le {{ request.approvedAt ? request.approvedAt|date('d/m/Y') : request.updatedAt|date('d/m/Y') }}.
                        {% elseif request.status == 'refused' %}
                            Demande refusée le {{ request.refusedAt ? request.refusedAt|date('d/m/Y') : request.updatedAt|date('d/m/Y') }}.
                        {% else %}
                            Statut actuel : {{ status_label }}.
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
        <div class="detail-action-row">
            <div class="detail-action-group">
                {% if can_submit %}
                    <form method="post" action="{{ path('app_leave_submit', {id: request.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('leave_request_submit_' ~ request.id) }}">
                        <button class="data-button data-button--primary" type="submit"><i class="ti ti-send" aria-hidden="true"></i>Soumettre</button>
                    </form>
                {% endif %}
                {% if can_validate %}
                    <button class="data-button data-button--primary" type="button" data-action="leave-detail#open" data-leave-detail-panel-param="approve">
                        <i class="ti ti-check" aria-hidden="true"></i>Valider
                    </button>
                {% endif %}
                {% if can_refuse %}
                    <button class="data-button detail-button--danger" type="button" data-action="leave-detail#open" data-leave-detail-panel-param="refuse">
                        <i class="ti ti-x" aria-hidden="true"></i>Refuser
                    </button>
                {% endif %}
                {% if can_edit %}
                    <a class="data-button data-button--secondary" href="{{ path('app_leave_edit', {id: request.id}) }}">
                        <i class="ti ti-pencil" aria-hidden="true"></i>Modifier
                    </a>
                {% endif %}
            </div>
            {% if can_cancel %}
                <button class="data-button data-button--secondary" type="button" data-action="leave-detail#open" data-leave-detail-panel-param="cancel">
                    <i class="ti ti-ban" aria-hidden="true"></i>Annuler la demande
                </button>
            {% endif %}
        </div>
        {% if can_validate %}
            <form class="detail-action-panel" data-leave-detail-target="panel" data-leave-detail-panel="approve" method="post" action="{{ path('app_leave_approve', {id: request.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('leave_request_approve_' ~ request.id) }}">
                <input type="hidden" name="_redirect" value="show">
                <label class="form-label" for="approve_comment">Commentaire de validation</label>
                <textarea class="form-control mb-3" id="approve_comment" name="comment" rows="3" placeholder="Ajouter un commentaire de validation..."></textarea>
                <div class="detail-action-group">
                    <button class="data-button data-button--primary" type="submit">Confirmer la validation</button>
                    <button class="data-button data-button--secondary" type="button" data-action="leave-detail#close">Fermer</button>
                </div>
            </form>
        {% endif %}
        {% if can_refuse %}
            <form class="detail-action-panel" data-leave-detail-target="panel" data-leave-detail-panel="refuse" method="post" action="{{ path('app_leave_refuse', {id: request.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('leave_request_refuse_' ~ request.id) }}">
                <input type="hidden" name="_redirect" value="show">
                <label class="form-label" for="refuse_comment">Motif du refus</label>
                <textarea class="form-control mb-3" id="refuse_comment" name="comment" rows="3" required placeholder="Expliquez le motif du refus..."></textarea>
                <div class="detail-action-group">
                    <button class="data-button detail-button--danger" type="submit">Confirmer le refus</button>
                    <button class="data-button data-button--secondary" type="button" data-action="leave-detail#close">Fermer</button>
                </div>
            </form>
        {% endif %}
        {% if can_cancel %}
            <form class="detail-action-panel" data-leave-detail-target="panel" data-leave-detail-panel="cancel" method="post" action="{{ path('app_leave_cancel', {id: request.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('leave_request_cancel_' ~ request.id) }}">
                <label class="form-label" for="cancel_comment">Commentaire d'annulation</label>
                <textarea class="form-control mb-3" id="cancel_comment" name="comment" rows="3" placeholder="Préciser la raison de l'annulation..."></textarea>
                <div class="detail-action-group">
                    <button class="data-button detail-button--danger" type="submit">Confirmer l'annulation</button>
                    <button class="data-button data-button--secondary" type="button" data-action="leave-detail#close">Fermer</button>
                </div>
            </form>
        {% endif %}
    </section>

    <div class="detail-layout detail-layout--validation">
        <section class="detail-card detail-team-calendar">
            <div class="detail-card__header">
                <h2>
                    <i class="ti ti-calendar-week" aria-hidden="true"></i>
                    Calendrier équipe
                    {% if team_calendar.period_start|default(null) %}
                        — Période du {{ team_calendar.period_start|date('d/m/Y') }} au {{ team_calendar.period_end|date('d/m/Y') }}
                    {% endif %}
                </h2>
                <span class="data-badge data-badge--{{ team_calendar.conflict_count|default(0) > 0 ? 'warning' : 'success' }}">
                    <i class="ti {{ team_calendar.conflict_count|default(0) > 0 ? 'ti-alert-triangle' : 'ti-check' }}" aria-hidden="true"></i>
                    {{ team_calendar.conflict_count|default(0) }} conflit{{ team_calendar.conflict_count|default(0) > 1 ? 's' : '' }} détecté{{ team_calendar.conflict_count|default(0) > 1 ? 's' : '' }}
                </span>
            </div>
            <div class="detail-card__body">
                <div class="detail-calendar-scroll">
                    <table class="detail-calendar-table">
                        <thead>
                            <tr>
                                <th>Collaborateur</th>
                                {% for day in team_calendar.days %}
                                    <th class="{{ day.in_request ? 'is-selected' : '' }}">{{ day.label }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in team_calendar.rows %}
                                {% set row_photo = row.salarie.photo ? row.salarie.photo|trim : null %}
                                {% set row_avatar = row_photo ? (row_photo starts with 'http://' or row_photo starts with 'https://' ? row_photo : asset(row_photo starts with '/' ? row_photo|slice(1) : row_photo)) : null %}
                                {% set row_initials = ((row.salarie.prenom|default('')|first) ~ (row.salarie.nom|default('')|first))|upper ?: 'S' %}
                                <tr>
                                    <td>
                                        <span class="detail-calendar-person {{ row.is_subject ? 'is-current' : '' }}">
                                            <span class="data-avatar data-avatar--sm {{ row_avatar ? '' : 'data-avatar--initials' }}">
                                                {% if row_avatar %}
                                                    <img src="{{ row_avatar }}" alt="{{ row.salarie }}">
                                                {% else %}
                                                    {{ row_initials }}
                                                {% endif %}
                                            </span>
                                            <strong>{{ row.salarie }}</strong>
                                        </span>
                                    </td>
                                    {% for cell in row.cells %}
                                        <td>
                                            <span class="detail-calendar-cell detail-calendar-cell--{{ cell.tone }}" title="{{ cell.request ? cell.request.leaveType.nom ~ ' · ' ~ status_labels[cell.request.status]|default(cell.request.status) : 'Disponible' }}">
                                                {{ cell.label }}
                                            </span>
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="{{ 1 + team_calendar.days|length }}">
                                        <div class="data-empty">
                                            <i class="ti ti-calendar-off" aria-hidden="true"></i>
                                            <strong>Aucune donnée d'équipe disponible.</strong>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="detail-legend">
                    <span><i class="detail-legend__dot detail-legend__dot--current"></i>Demande en cours</span>
                    <span><i class="detail-legend__dot detail-legend__dot--conflict"></i>Absent (conflit)</span>
                    <span><i class="detail-legend__dot detail-legend__dot--approved"></i>Absent (validé)</span>
                </div>
            </div>
        </section>

        <aside class="detail-side-stack">
            <section class="detail-card detail-risk-card">
                <div class="detail-card__header">
                    <h2><i class="ti ti-alert-triangle" aria-hidden="true"></i> Risque d'équipe</h2>
                </div>
                <div class="detail-card__body">
                    {% if team_calendar.conflict_count|default(0) > 0 %}
                        <div class="detail-risk-alert">
                            <strong>{{ team_calendar.conflict_count }} conflit{{ team_calendar.conflict_count > 1 ? 's' : '' }} détecté{{ team_calendar.conflict_count > 1 ? 's' : '' }}</strong>
                            <p>
                                La demande de {{ salarie }} chevauche
                                {% for conflict in team_calendar.conflicts %}
                                    {{ conflict.salarie }}{% if not loop.last %}, {% endif %}
                                {% endfor %}.
                            </p>
                            <button class="detail-link-button" type="button" data-action="leave-detail#toggleRisk">
                                Voir le détail
                            </button>
                            <div class="detail-risk-list" data-leave-detail-target="riskDetails" hidden>
                                {% for conflict in team_calendar.conflicts %}
                                    <div class="detail-risk-item">
                                        <strong>{{ conflict.salarie }}</strong>
                                        <span>{{ conflict.leaveType.nom }} du {{ conflict.startDate|date('d/m/Y') }} au {{ conflict.endDate|date('d/m/Y') }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% else %}
                        <div class="detail-risk-ok">
                            <i class="ti ti-circle-check" aria-hidden="true"></i>
                            <strong>Aucun conflit détecté</strong>
                            <span>L'équipe dispose d'une couverture suffisante sur la période.</span>
                        </div>
                    {% endif %}
                </div>
            </section>
        </aside>
    </div>

    <div class="detail-layout">
        <div class="detail-main-stack">
            <section class="detail-card">
                <div class="detail-card__header">
                    <h2><i class="ti ti-calendar" aria-hidden="true"></i> Détail journalier</h2>
                </div>
                <div class="data-table-wrap">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Jour</th>
                                <th>Décompté</th>
                                <th>Motif</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for day in request.days %}
                            <tr class="data-row {{ not day.workingDay ? 'is-muted' : '' }}">
                                <td><span class="data-main-text">{{ day.date|date('d/m/Y') }}</span></td>
                                <td><span class="data-sub-text">{{ day_names[day.date|date('N')] }}</span></td>
                                <td><span class="data-badge {{ day.duration > 0 ? 'data-badge--info' : 'data-badge--muted' }}">{{ day.duration|number_format(day.duration == day.duration|round ? 0 : 1, ',', ' ') }} j</span></td>
                                <td><span class="data-sub-text">{{ day.label ?: (day.weekend ? 'Week-end' : request.leaveType.nom) }}</span></td>
                            </tr>
                        {% else %}
                            <tr><td colspan="4"><div class="data-empty"><i class="ti ti-calendar-off" aria-hidden="true"></i><strong>Aucun détail journalier.</strong></div></td></tr>
                        {% endfor %}
                            <tr class="detail-table-total">
                                <td colspan="2">Total</td>
                                <td>{{ request.durationDays|number_format(request.durationDays == request.durationDays|round ? 0 : 1, ',', ' ') }} j</td>
                                <td>{{ request.leaveType.nom }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="detail-card">
                <div class="detail-card__header">
                    <h2><i class="ti ti-messages" aria-hidden="true"></i> Commentaires</h2>
                </div>
                <div class="detail-card__body">
                    <div class="detail-thread">
                        {% if request.employeeComment %}
                            <div class="detail-comment">
                                <span class="data-avatar {{ salarie_avatar ? '' : 'data-avatar--initials' }}">
                                    {% if salarie_avatar %}<img src="{{ salarie_avatar }}" alt="{{ salarie }}">{% else %}{{ salarie_initials }}{% endif %}
                                </span>
                                <div>
                                    <div class="detail-comment__meta">
                                        <span class="detail-comment__author">{{ salarie }}</span>
                                        <span class="data-badge data-badge--muted">Salarié</span>
                                    </div>
                                    <div class="detail-comment__bubble">{{ request.employeeComment|nl2br }}</div>
                                </div>
                            </div>
                        {% endif %}
                        {% if request.managerComment %}
                            <div class="detail-comment">
                                <span class="data-avatar {{ manager_avatar ? '' : 'data-avatar--initials' }}">
                                    {% if manager_avatar %}<img src="{{ manager_avatar }}" alt="{{ manager }}">{% else %}{{ manager_initials }}{% endif %}
                                </span>
                                <div>
                                    <div class="detail-comment__meta">
                                        <span class="detail-comment__author">{{ manager ?: 'Manager' }}</span>
                                        <span class="data-badge data-badge--warning">Manager</span>
                                    </div>
                                    <div class="detail-comment__bubble detail-comment__bubble--warning">{{ request.managerComment|nl2br }}</div>
                                </div>
                            </div>
                        {% endif %}
                        {% if request.rhComment %}
                            <div class="detail-comment">
                                <span class="data-avatar data-avatar--initials">RH</span>
                                <div>
                                    <div class="detail-comment__meta">
                                        <span class="detail-comment__author">RH</span>
                                        <span class="data-badge data-badge--info">RH</span>
                                    </div>
                                    <div class="detail-comment__bubble">{{ request.rhComment|nl2br }}</div>
                                </div>
                            </div>
                        {% endif %}
                        {% for item in history %}
                            {% if item.action == 'comment' %}
                                {% set actor = item.user %}
                                {% set actor_salarie = actor ? actor.salarie : null %}
                                {% set actor_name = actor ? ((actor.prenom|default('') ~ ' ' ~ actor.nom|default(''))|trim ?: actor.email) : 'Système' %}
                                {% set actor_photo = actor_salarie and actor_salarie.photo ? actor_salarie.photo|trim : (actor and actor.image ? actor.image|trim : null) %}
                                {% set actor_avatar = actor_photo ? (actor_photo starts with 'http://' or actor_photo starts with 'https://' ? actor_photo : asset(actor_photo starts with '/' ? actor_photo|slice(1) : actor_photo)) : null %}
                                {% set actor_initials = actor ? (((actor.prenom|default('')|first) ~ (actor.nom|default('')|first))|upper ?: 'U') : 'S' %}
                                <div class="detail-comment">
                                    <span class="data-avatar {{ actor_avatar ? '' : 'data-avatar--initials' }}">
                                        {% if actor_avatar %}<img src="{{ actor_avatar }}" alt="{{ actor_name }}">{% else %}{{ actor_initials }}{% endif %}
                                    </span>
                                    <div>
                                        <div class="detail-comment__meta">
                                            <span class="detail-comment__author">{{ actor_name }}</span>
                                            <span class="data-sub-text">{{ item.createdAt|date('d/m/Y H:i') }}</span>
                                        </div>
                                        <div class="detail-comment__bubble">{{ item.message|nl2br }}</div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                        {% if not request.employeeComment and not request.managerComment and not request.rhComment and history|filter(item => item.action == 'comment')|length == 0 %}
                            <div class="detail-comment__bubble detail-comment__bubble--muted">Aucun commentaire pour le moment...</div>
                        {% endif %}
                    </div>

                    <form class="detail-comment-form mt-4" method="post" action="{{ path('app_leave_comment', {id: request.id}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('leave_request_comment_' ~ request.id) }}">
                        <textarea class="form-control" name="comment" required placeholder="Ajouter un commentaire..."></textarea>
                        <div class="text-end">
                            <button class="data-button data-button--primary" type="submit">Envoyer</button>
                        </div>
                    </form>
                </div>
            </section>

            <section class="detail-card">
                <div class="detail-card__header">
                    <h2><i class="ti ti-history" aria-hidden="true"></i> Historique</h2>
                </div>
                <div class="detail-timeline">
                    <div class="detail-timeline__row detail-timeline__head">
                        <span>Date</span>
                        <span>Utilisateur</span>
                        <span>Action</span>
                        <span>Message</span>
                    </div>
                    {% for item in history %}
                        {% set actor = item.user %}
                        {% set actor_name = actor ? ((actor.prenom|default('') ~ ' ' ~ actor.nom|default(''))|trim ?: actor.email) : 'Système' %}
                        <div class="detail-timeline__row">
                            <span class="data-sub-text">{{ item.createdAt|date('d/m/Y H:i') }}</span>
                            <strong>{{ actor_name }}</strong>
                            <span><span class="data-badge {{ item.action in ['approved'] ? 'data-badge--success' : (item.action in ['submitted', 'comment'] ? 'data-badge--warning' : 'data-badge--muted') }}">{{ item.action|replace({'_': ' '})|capitalize }}</span></span>
                            <span class="data-sub-text">{{ item.message }}</span>
                        </div>
                    {% else %}
                        <div class="data-empty"><i class="ti ti-history" aria-hidden="true"></i><strong>Aucun historique.</strong></div>
                    {% endfor %}
                </div>
            </section>
        </div>

        <aside class="detail-side-stack">
            <section class="detail-card">
                <div class="detail-card__header">
                    <h2><i class="ti ti-list-check" aria-hidden="true"></i> Validation</h2>
                </div>
                <div class="detail-card__body">
                    <div class="detail-validation-list">
                        {% for approval in request.approvals %}
                            <div class="detail-validation-item">
                                <i class="ti {{ approval.status == 'approved' ? 'ti-circle-check' : (approval.status == 'refused' ? 'ti-circle-x' : 'ti-clock') }}" aria-hidden="true"></i>
                                <div>
                                    <strong>{{ approval.step|capitalize }}</strong>
                                    <div class="data-sub-text">
                                        {{ approval.status|replace({'_': ' '})|capitalize }}
                                        {% if approval.decidedAt %} · {{ approval.decidedAt|date('d/m/Y H:i') }}{% endif %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="data-empty"><i class="ti ti-list-check" aria-hidden="true"></i><strong>Aucune étape de validation.</strong></div>
                        {% endfor %}
                    </div>
                </div>
            </section>

            {% if request.attachmentPath %}
                <section class="detail-card">
                    <div class="detail-card__header">
                        <h2><i class="ti ti-paperclip" aria-hidden="true"></i> Justificatif</h2>
                    </div>
                    <div class="detail-card__body">
                        <span class="data-sub-text">{{ request.attachmentPath }}</span>
                    </div>
                </section>
            {% endif %}
        </aside>
    </div>
</div>
{% endblock %}