{# Template pour afficher la timeline du workflow des notes #}

<div class="grade-workflow-timeline" data-grade-id="{{ grade.id }}">
    <div class="timeline-header">
        <h5 class="mb-3">
            <i class="fas fa-history"></i>
            Historique de validation
        </h5>
        <div class="current-status">
            <span class="badge badge-{{ grade.workflowStatusColor }}">
                {{ grade.workflowStatusLabel }}
            </span>
        </div>
    </div>

    <div class="timeline-container">
        {% set timeline = grade.workflowTimeline %}
        {% for step in timeline %}
            <div class="timeline-item timeline-{{ step.status }}">
                <div class="timeline-marker">
                    {% if step.status == 'completed' %}
                        <i class="fas fa-check-circle text-success"></i>
                    {% elseif step.status == 'current' %}
                        <i class="fas fa-clock text-warning"></i>
                    {% else %}
                        <i class="fas fa-circle text-muted"></i>
                    {% endif %}
                </div>
                
                <div class="timeline-content">
                    <div class="timeline-header">
                        <h6 class="timeline-title">
                            <i class="{{ step.icon }}"></i>
                            {{ step.label }}
                        </h6>
                        {% if step.date %}
                            <small class="text-muted">
                                {{ step.date|date('d/m/Y H:i') }}
                            </small>
                        {% endif %}
                    </div>
                    
                    {% if step.user %}
                        <div class="timeline-user">
                            <small class="text-muted">
                                Par: {{ step.user.firstName }} {{ step.user.lastName }}
                            </small>
                        </div>
                    {% endif %}
                    
                    {% if step.comments %}
                        <div class="timeline-comments mt-2">
                            <div class="alert alert-info alert-sm">
                                <strong>Commentaires:</strong><br>
                                {{ step.comments }}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<style>
.grade-workflow-timeline {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.timeline-container {
    position: relative;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 25px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: 11px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.timeline-content {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    border-left: 3px solid #dee2e6;
}

.timeline-completed .timeline-content {
    border-left-color: #28a745;
    background: #f8fff9;
}

.timeline-current .timeline-content {
    border-left-color: #ffc107;
    background: #fffbf0;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.timeline-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
}

.timeline-user {
    font-size: 0.8rem;
}

.timeline-comments .alert-sm {
    padding: 8px 12px;
    font-size: 0.8rem;
    margin: 0;
}

.current-status .badge {
    font-size: 0.8rem;
    padding: 6px 12px;
}

.badge-secondary { background-color: #6c757d; }
.badge-warning { background-color: #ffc107; color: #212529; }
.badge-info { background-color: #17a2b8; }
.badge-success { background-color: #28a745; }
.badge-primary { background-color: #007bff; }
</style>