{# templates/admin/etape/_etape_row.html.twig #}

{% set progress = etape.pourcentageAvancement|default(0) %}
{# Logique de couleur identique au JS pour la cohérence #}
{% set colorClass = progress >= 100 ? 'success' : (progress >= 50 ? 'warning' : (progress > 0 ? 'primary' : 'danger')) %}

<div class="mb-4 position-relative ps-4 border-start" id="etape-container-{{ etape.id }}">
    {# Le point indicateur sur la timeline #}
    <div id="dot-etape-{{ etape.id }}" 
         class="position-absolute start-0 translate-middle-x bg-{{ colorClass }} rounded-circle shadow-sm" 
         style="width: 14px; height: 14px; margin-left: -1px; top: 5px; transition: all 0.3s ease;"></div>

    <div class="d-flex justify-content-between align-items-center mb-1">
        <div class="d-flex align-items-center">
            {# Libellé de l'étape #}
            <span class="small fw-semibold {{ progress >= 100 ? 'text-success' : '' }} me-3" 
                  id="label-etape-{{ etape.id }}">
                {{ etape.libelle }}
            </span>

            {# Bouton de gestion des médias #}
            <button class="btn btn-xs btn-light border text-primary open-media-modal shadow-xs" 
                    data-target-type="ETAPE" 
                    data-target-id="{{ etape.id }}" 
                    data-label="Étape : {{ etape.libelle }} (Lot {{ lot.numeroLot }})">
                <i class="fas fa-paperclip me-1"></i> Fichiers
                <span class="badge bg-primary ms-1" id="media-count-ETAPE-{{ etape.id }}">
                    {{ etape.documents|length|default(0) }}
                </span>
            </button>
        </div>

        {# Champ de saisie du pourcentage #}
        <div class="input-group input-group-sm" style="width: 100px;">
            <input type="number" 
                   class="form-control form-control-sm update-progress-input fw-bold shadow-sm border-end-0" 
                   value="{{ progress }}" 
                   data-etape-id="{{ etape.id }}"
                   min="0" max="100"
                   placeholder="0">
            <span class="input-group-text small bg-white text-muted border-start-0" 
                  id="spinner-etape-{{ etape.id }}">
                %
            </span>
        </div>
    </div>
    
    {# Barre de progression de l'étape #}
    <div class="progress" style="height: 6px; background-color: #f0f0f0; border-radius: 10px;">
        <div id="bar-etape-{{ etape.id }}" 
             class="progress-bar bg-{{ colorClass }} progress-bar-animated" 
             role="progressbar"
             style="width: {{ progress }}%; transition: width 0.5s ease;"></div>
    </div>
</div>