{% set lastScheduledCall = lastScheduledCall|default(null) %}
{% set callStats = callStats|default({'joignable': 0, 'nonJoignable': 0}) %}
{% set calls = calls|default([]) %}

<div id="document-calls-history">

     {# -- Barre actions + stats (ligne unique) -- #}
    <div class="d-flex align-items-center justify-content-between mb-3 gap-2 flex-wrap">

        {# -- Actions (gauche) -- #}
        <div class="d-flex align-items-center gap-1">

            <button type="button"
                    class="btn btn-light border btn-call-open"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="Ouvrir le panneau d'appel">
                <i class="fa fa-phone-volume text-primary"></i>
            </button>

            <button type="button"
                    class="btn btn-light border btn-call-schedule
                        {% if lastScheduledCall %}disabled{% endif %}"
                    {% if lastScheduledCall %}disabled aria-disabled="true"{% endif %}
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    title="{% if lastScheduledCall %}Rappel déjà programmé{% else %}Programmer un rappel{% endif %}">
                <i class="fa fa-clock {% if lastScheduledCall %}text-muted{% else %}text-warning{% endif %}"></i>
            </button>


        </div>

        {# -- États (droite) -- #}
        <div class="d-flex align-items-center gap-3">

            {% if lastScheduledCall %}

                {% set isToday = lastScheduledCall.scheduledAt|date('Y-m-d') == "now"|date('Y-m-d') %}
                <div class="d-inline-flex align-items-center gap-1">

                    {# Bouton modifier — compact, icône seule #}
                    <button type="button"
                            class="btn btn-xs btn-outline-warning px-2"
                            id="btnEditScheduledCall"
                            data-call-id="{{ lastScheduledCall.id }}"
                            data-date="{{ lastScheduledCall.scheduledAt|date('Y-m-d\\TH:i') }}"
                            data-note="{{ lastScheduledCall.note }}"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Modifier le rappel">
                        <i class="fa fa-edit"></i>
                    </button>

                    {# Badge rappel #}
                    <span class="badge bg-warning text-dark {{ isToday ? 'blinking' : '' }}"
                        data-bs-toggle="tooltip"
                        title="{{ lastScheduledCall.scheduledAt|date('d/m/Y H:i') }}">
                        <i class="fa fa-clock me-1"></i>
                        {{ isToday ? 'Rappel aujourd’hui' : 'Rappel programmé' }}
                    </span>

                </div>


            {% endif %}


            <span class="badge bg-success"
                data-bs-toggle="tooltip"
                title="Appels joignables">
                <i class="fa fa-phone me-1"></i>
                {{ callStats.joignable }}
            </span>

            <span class="badge bg-danger"
                data-bs-toggle="tooltip"
                title="Appels non joignables">
                <i class="fa fa-phone-slash me-1"></i>
                {{ callStats.nonJoignable }}
            </span>

        </div>
    </div>

    <div style="max-height:300px; overflow:auto">
        <hr class="crm-separator">

        {% for call in calls %}
            <div class="d-flex align-items-start mb-4 py-2">

                {# Icône statut / rappel #}
                <div class="me-2 pt-1">
                    {% if call.scheduledAt %}
                        {% if lastScheduledCall and call.id == lastScheduledCall.id %}
                            <i class="fa fa-clock text-warning"
                            title="Rappel programmé actif"></i>
                        {% else %}
                            <i class="fa fa-clock text-secondary"
                            title="Rappel ancien"></i>
                        {% endif %}
                    {% else %}
                        <i class="fa {{ call.status == 'joignable'
                            ? 'fa-phone text-success'
                            : 'fa-phone-slash text-danger' }}"
                        data-bs-toggle="tooltip"
                        title="{{ call.status == 'joignable' ? 'Joignable' : 'Non joignable' }}">
                        </i>
                    {% endif %}
                </div>

                {# Contenu principal #}
                <div class="flex-grow-1">

                    <div class="d-flex justify-content-between align-items-start">

                        {# Infos appel (gauche) #}
                        <div class="small text-wrap">

                            <span class="fw-semibold text-primary">
                                {{ call.calledAt|date('d/m/Y H:i') }}
                            </span>

                            {% if call.callDuration %}
                                <span class="text-muted ms-1">
                                    • {{ (call.callDuration / 60)|round(0, 'floor') }} min
                                    {% if (call.callDuration % 60) > 0 %}
                                        {{ (call.callDuration % 60) }} s
                                    {% endif %}
                                </span>
                            {% endif %}

                            {% if call.reason %}
                                <span class="text-muted">
                                    — ({{ call.reason|replace({'_':' '}) }})
                                </span>
                            {% endif %}

                            {% if call.note %}
                                <div class="text-muted fst-italic mt-1">
                                    {{ call.note }}
                                </div>
                            {% endif %}
                        </div>

                        {# Utilisateur (droite) #}
                        <div class="small text-muted text-end ms-3 flex-shrink-0">
                            {{ call.user ? call.user.firstName : '-' }}
                        </div>

                    </div>
                </div>

            </div>
        {% else %}
            <div class="alert alert-warning text-center mb-0">
                Aucun appel enregistré.
            </div>
        {% endfor %}
    </div>
</div>