{% extends "base.html" %}
{% load static %}

{% block title %}Lecture du Message - {{ block.super }}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/messaging/message_detail.css' %}">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- En-tête de la page -->
        <div class="mb-4">
            <!-- Lien de navigation Retour -->
            <div class="mb-3">
                <a href="{% url 'messaging:inbox' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-arrow-left me-2"></i>
                    Retour à la boîte de réception
                </a>
            </div>
            
            <!-- Titre principal -->
            <h1 class="display-6 fw-bold text-dark mb-2">
                <i class="fas fa-envelope-open me-3 text-primary"></i>
                {{ message.subject }}
            </h1>
        </div>
        
        <!-- Carte du message -->
        <div class="card shadow-sm">
            <!-- En-tête de la carte -->
            <div class="card-header bg-light">
                <div class="d-flex justify-content-between align-items-center">
                    <!-- Informations expéditeur -->
                    <div class="d-flex align-items-center">
                        <div>
                            <h6 class="mb-0 text-dark">
                                <i class="fas fa-user me-2 text-muted"></i>
                                <strong>De :</strong> {{ message.sender.username }}
                            </h6>
                            {% if message.sender.first_name %}
                                <small class="text-muted">
                                    {{ message.sender.first_name }} {{ message.sender.last_name }}
                                </small>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Date d'envoi -->
                    <div class="text-end">
                        <div class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            <strong>Envoyé le :</strong>
                        </div>
                        <div class="fw-medium">
                            {{ message.sent_at|date:"d F Y" }}
                            <br>
                            <small class="text-muted">
                                {{ message.sent_at|time:"H:i" }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Corps de la carte -->
            <div class="card-body">
                <!-- Statut de lecture -->
                {% if not message.is_read %}
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Nouveau message :</strong> Ce message vient d'être marqué comme lu.
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endif %}
                
                <!-- Contenu du message -->
                <div class="message-content">
                    <div class="fs-6 lh-lg">
                        {{ message.body|linebreaks }}
                    </div>
                </div>
                
                <!-- Séparateur -->
                <hr class="my-4">
                
                <!-- Informations supplémentaires -->
                <div class="row text-muted small">
                    <div class="col-md-6">
                        <i class="fas fa-tag me-1"></i>
                        <strong>Sujet :</strong> {{ message.subject }}
                    </div>
                    <div class="col-md-6 text-md-end">
                        <i class="fas fa-calendar me-1"></i>
                        <strong>Reçu le :</strong> {{ message.created_at|date:"d/m/Y à H:i" }}
                    </div>
                </div>
            </div>
            
            <!-- Pied de page de la carte -->
            <div class="card-footer text-end bg-light">
                <div class="btn-group" role="group" aria-label="Actions du message">
                    <!-- Bouton Répondre -->
                    <a href="#" class="btn btn-primary">
                        <i class="fas fa-reply me-1"></i>
                        Répondre
                    </a>
                    
                    <!-- Bouton Archiver -->
                    <a href="#" class="btn btn-outline-secondary">
                        <i class="fas fa-archive me-1"></i>
                        Archiver
                    </a>
                    
                    <!-- Bouton Supprimer -->
                    <a href="#" class="btn btn-outline-danger" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce message ? Cette action est irréversible.')">
                        <i class="fas fa-trash me-1"></i>
                        Supprimer
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Actions supplémentaires -->
        <div class="mt-3 d-flex justify-content-between align-items-center">
            <!-- Navigation précédent/suivant (si nécessaire) -->
            <div>
                <small class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Message affiché en mode lecture seule
                </small>
            </div>
            
            <!-- Bouton retour alternatif -->
            <div>
                <a href="{% url 'messaging:inbox' %}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-list me-1"></i>
                    Voir tous les messages
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/messaging/message_detail.js' %}"></script>
{% endblock %}