{% if beneficiaire is not defined or not beneficiaire %}
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Erreur :</strong> Impossible de charger le masque d'entretien du bénéficiaire.
    </div>
{% else %}

    {% include '_flash_messages.html.twig' %}

    <div class="card border-0 shadow-sm questions-card">
        <div class="card-header purple text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-file-alt me-2"></i>
                    Questions d'évaluation
                </h5>
            </div>
        </div>
        <div class="card-body p-0">
            {% set questions = questions|default({}) %}

            {% if questions is not empty and questions|length > 0 %}
                {% set hasContent = false %}
                {% for question in questions %}
                    {% if question.reponse is defined and question.reponse and question.reponse|trim is not empty %}
                        {% set hasContent = true %}
                    {% endif %}
                {% endfor %}

                {% if hasContent %}
                    <div class="questions-list">
                        {% for key, question in questions %}
                            <div class="question-item">
                                <div class="question-header-masque">
                                    <div class="question-indicator">
                                        {% if question.reponse is defined and question.reponse and question.reponse|trim is not empty %}
                                            <i class="fas fa-check-circle text-success"></i>
                                        {% else %}
                                            <i class="fas fa-circle text-muted"></i>
                                        {% endif %}
                                    </div>
                                    <div class="question-title">
                                        <i class="fas fa-question-circle me-2 text-info"></i>
                                        {{ question.question|default('Question non définie') }}
                                    </div>
                                </div>
                                <div class="question-content">
                                    {% if question.reponse is defined and question.reponse and question.reponse|trim is not empty %}
                                        <div class="response-content">
                                            <div class="response-badge">
                                                <i class="fas fa-comment-dots me-1"></i>
                                                Réponse
                                            </div>
                                            <div class="response-text">
                                                {{ question.reponse|nl2br }}
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="no-response">
                                            <i class="fas fa-minus-circle me-2"></i>
                                            Aucune réponse renseignée pour cette question
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    <div class="card-footer bg-light border-0">
                        <div class="d-flex justify-content-between align-items-center text-muted small" style="flex-direction: row-reverse">
                            {% if formulaire is defined and formulaire and formulaire.dateModification is defined and formulaire.dateModification %}
                                <div>
                                    <i class="fas fa-clock me-1 text-info"></i>
                                    Dernière modification : {{ formulaire.dateModification|date('d/m/Y') }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fa-solid fa-mask"></i>
                        </div>
                        <h6 class="empty-title">Questions présentes mais aucune réponse</h6>
                        <p class="empty-description">
                            {{ questions|length }} question{{ questions|length > 1 ? 's' : '' }} disponible{{ questions|length > 1 ? 's' : '' }} dans le masque d'entretien.
                            <br>Commencez l'évaluation pour recueillir les réponses.
                        </p>
                        <a href="{{ path('app_dossier_masque', {'id': beneficiaire.id}) }}?edit=true" class="btn btn-save-inline">
                            <i class="fa-solid fa-file-pen"></i>
                            Commencer l'évaluation
                        </a>
                    </div>
                {% endif %}
            {% else %}
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h6 class="empty-title">Aucun masque d'entretien configuré</h6>
                    <p class="empty-description">
                        Commencez par créer votre premier masque d'évaluation pour structurer vos entretiens.
                    </p>
                    <a href="{{ path('app_dossier_masque', {'id': beneficiaire.id}) }}?edit=true" class="btn btn-info btn-create">
                        <i class="fas fa-plus me-2"></i>
                        Créer le masque
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}