{% set estadoConfig = {
    'Borrador':             { 'color': 'secondary', 'icon': 'fa-pencil-ruler' },
    'En Espera':            { 'color': 'info text-dark', 'icon': 'fa-clock' },
    'Iniciado':             { 'color': 'primary',   'icon': 'fa-play' },
    'Finalizado':           { 'color': 'success',   'icon': 'fa-check-circle' },
    'Erroneo':              { 'color': 'danger',    'icon': 'fa-exclamation-circle' },
    'Finalizado con Error': { 'color': 'danger',    'icon': 'fa-exclamation-triangle' }
} %}

<div class="row" id="header-cards-container">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header cardInfoMasivoHeader">
                <h5 class="card-title mb-0">
                    <i class="fa fa-info-circle me-2"></i>
                    Información del Versionado
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row">
                            <dt class="col-sm-5">Usuario:</dt>
                            <dd class="col-sm-7">{{ masivo.ssoUsuario }}</dd>
                            <dt class="col-sm-5">Estado:</dt>
                            <dd class="col-sm-7">
                                <span class="badge bg-{{ estadoConfig[masivo.estado].color }}" id="masivo-badge-estado">{{ masivo.estado }}</span>
                            </dd>
                            <dt class="col-sm-5">Fecha Inicio:</dt>
                            <dd class="col-sm-7">{{ masivo.fechaInicio ? masivo.fechaInicio|date('d/m/Y H:i') : 'Sin iniciar' }}</dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="row">
                            {% if masivo.fechaFinalizacion %}
                                <dt class="col-sm-5">Fecha Finalización:</dt>
                                <dd class="col-sm-7" id="masivo-fecha-finalizacion">{{ masivo.fechaFinalizacion|date('d/m/Y H:i') }}</dd>
                            {% endif %}
                            <dt class="col-sm-5">Total RIAs:</dt>
                            <dd class="col-sm-7">
                                <span class="badge bg-primary" id="total-rias-badge">{{ masivo.riaVersiones|length }}</span>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header cardEstadisticasHeader">
                <h6 class="card-title mb-0">
                    <i class="fa fa-chart-pie me-2"></i>
                    Estadísticas de las versiones
                </h6>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for estado, cantidad in contadores_db %}
                        <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                            <span class="text-white">
                                <i class="fa {{ estadoConfig[estado].icon }} text-{{ estadoConfig[estado].color|split(' ')[0] }} me-1"></i>
                                {{ estado }}
                            </span>
                            <span class="badge bg-{{ estadoConfig[estado].color }} rounded-pill">
                                {{ cantidad }}
                            </span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>