{% 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 diagnostic professionnel.
    </div>
{% else %}

    <!-- Affichage des messages flash -->
    {% include '_flash_messages.html.twig' %}

    <div class="card border-0 shadow-sm diagnostic-card">
        <div class="card-header bg-gradient-primary text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-clipboard-check me-2"></i>
                    Diagnostic professionnel
                </h5>
            </div>
        </div>
        <div class="card-body p-0">
            {% if diagnosticPro %}
                <!-- Informations du diagnostic -->
                <div class="p-4">
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <div class="info-box">
                                <label class="text-muted small mb-1">
                                    <i class="fas fa-calendar me-1"></i>
                                    Date de l'entretien
                                </label>
                                <div class="fw-bold text-dark">
                                    {{ diagnosticPro.dateEntretien|date('d/m/Y') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-box">
                                <label class="text-muted small mb-1">
                                    <i class="fas fa-user me-1"></i>
                                    Nom du conseiller
                                </label>
                                <div class="fw-bold text-dark">
                                    {{ diagnosticPro.nomConseiller }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="info-box">
                                <label class="text-muted small mb-1">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    Structure
                                </label>
                                <div class="fw-bold text-dark">
                                    {{ diagnosticPro.structure }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Question et réponse -->
                    <div class="question-section">
                        <div class="mb-3 text-header h5 fw-bold">
                            <i class="fas fa-question-circle me-2"></i>
                            Est-ce que la personne se projette dans l'activité ?
                        </div>
                        <div class="reponse-box">
                            {% if diagnosticPro.reponseProjection %}
                                {{ diagnosticPro.reponseProjection|nl2br }}
                            {% else %}
                                <span class="text-muted">
                                    <i class="fas fa-minus-circle me-1"></i>
                                    Aucune réponse enregistrée
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-light border-0">
                    <div class="d-flex justify-content-between align-items-center text-muted small">
                        {% if diagnosticPro.dateModification %}
                            <div>
                                <i class="fas fa-clock me-1 text-header"></i>
                                Dernière modification : {{ diagnosticPro.dateModification|date('d/m/Y') }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="fas fa-clipboard-check"></i>
                    </div>
                    <h6 class="empty-title">Aucun diagnostic professionnel enregistré</h6>
                    <p class="empty-description">Commencez par créer le diagnostic professionnel pour ce bénéficiaire.</p>
                    <a href="{{ path('app_diagnostic_edit', {'beneficiaireId': beneficiaire.id}) }}" class="btn btn-primary btn-create">
                        <i class="fas fa-plus me-2"></i>
                        Créer le diagnostic
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <style>
        .diagnostic-card .info-box {
            padding: 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            border-left: 4px solid #5f50ce;
            transition: all 0.3s ease;
        }

        .diagnostic-card .question-section {
            margin-top: 25px;
        }

        .diagnostic-card .reponse-box {
            padding: 25px;
            background: #ffffff;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            min-height: 120px;
            line-height: 1.8;
            transition: all 0.3s ease;
        }

        .diagnostic-card .empty-state {
            padding: 80px 20px;
            text-align: center;
        }

        .diagnostic-card .empty-icon {
            font-size: 5rem;
            color: #dee2e6;
            margin-bottom: 25px;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        .diagnostic-card .empty-title {
            color: #6c757d;
            font-size: 1.35rem;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .diagnostic-card .empty-description {
            color: #adb5bd;
            margin-bottom: 30px;
            font-size: 1.05rem;
        }
    </style>
{% endif %}