{% extends 'base.html.twig' %}

{% block title %}Message de {{ contact.nom }}{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>Message de contact</h1>
                <div class="btn-group" role="group">
                    <a href="{{ path('app_admin_contact_index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Retour à la liste
                    </a>
                    <form method="post" 
                          action="{{ path('app_admin_contact_toggle_traite', {'id': contact.id}) }}" 
                          class="d-inline">
                        <button type="submit" 
                                class="btn btn-{{ contact.traite ? 'warning' : 'success' }}">
                            <i class="fas fa-{{ contact.traite ? 'undo' : 'check' }}"></i>
                            {{ contact.traite ? 'Marquer comme non traité' : 'Marquer comme traité' }}
                        </button>
                    </form>
                </div>
            </div>

            {% for flash_message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ flash_message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}

            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">{{ contact.sujet }}</h5>
                            {% if contact.traite %}
                                <span class="badge bg-success fs-6">Traité</span>
                            {% else %}
                                <span class="badge bg-warning fs-6">Non traité</span>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <div class="message-content">
                                {{ contact.message|nl2br }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Informations</h5>
                        </div>
                        <div class="card-body">
                            <div class="info-item mb-3">
                                <strong class="text-muted">Nom :</strong><br>
                                <span class="fs-5">{{ contact.nom }}</span>
                            </div>
                            
                            <div class="info-item mb-3">
                                <strong class="text-muted">Email :</strong><br>
                                <a href="mailto:{{ contact.email }}" class="text-decoration-none">
                                    {{ contact.email }}
                                </a>
                            </div>
                            
                            <div class="info-item mb-3">
                                <strong class="text-muted">Date :</strong><br>
                                {{ contact.dateCreation|date('d/m/Y à H:i') }}
                            </div>
                            
                            <div class="info-item">
                                <strong class="text-muted">Statut :</strong><br>
                                {% if contact.traite %}
                                    <span class="badge bg-success">Traité</span>
                                {% else %}
                                    <span class="badge bg-warning">Non traité</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="card mt-3">
                        <div class="card-header">
                            <h5 class="mb-0">Actions</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="mailto:{{ contact.email }}?subject=Re: {{ contact.sujet|url_encode }}" 
                                   class="btn btn-primary">
                                    <i class="fas fa-reply"></i> Répondre par email
                                </a>
                                
                                <form method="post" 
                                      action="{{ path('app_admin_contact_delete', {'id': contact.id}) }}" 
                                      onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce message ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ contact.id) }}">
                                    <button type="submit" class="btn btn-danger w-100">
                                        <i class="fas fa-trash"></i> Supprimer
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.message-content {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #0066cc;
    font-family: inherit;
    line-height: 1.6;
    white-space: pre-wrap;
}

.info-item {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
</style>
{% endblock %}