{% extends "base.html" %}
{% block title %}{{ thread.title }}{% endblock %}
{% block content %}
<h2 class="text-2xl font-semibold mb-2">{{ thread.title }}</h2>  <!-- Titre du fil -->
<p class="text-gray-500 mb-4">Créé le {{ thread.timestamp.strftime('%d/%m/%Y %H:%M:%S') }}</p>  <!-- Date de création -->

<div class="messages space-y-6">  <!-- Conteneur pour les messages, espacement vertical -->
    {% for msg in messages %}
        <div class="message {% if msg.removed %}bg-gray-200 text-gray-500{% else %}bg-white{% endif %} p-4 rounded-md shadow-sm">  <!-- Style du message, condition pour les messages supprimés -->
            {% if not msg.removed %}
                <p class="text-gray-800">{{ msg.content | safe }}</p>  <!-- Contenu du message -->
                <div class="text-sm text-gray-500 mt-1 mb-2">  <!-- Informations sur le message -->
                    Posté le {{ msg.timestamp.strftime('%d/%m/%Y %H:%M:%S') }} - Votes: {{ msg.vote_count }}
                </div>
                <div class="message-actions flex items-center space-x-4">  <!-- Actions sur le message -->
                    <form action="{{ url_for('vote', message_id=msg.id, action='up') }}" method="POST">
                        <button type="submit" aria-label="Upvote"
                                class="text-green-500 hover:text-green-700 transition-colors duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
                            </svg>
                        </button>
                    </form>
                    <form action="{{ url_for('vote', message_id=msg.id, action='down') }}" method="POST">
                        <button type="submit" aria-label="Downvote"
                                class="text-red-500 hover:text-red-700 transition-colors duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" />
                            </svg>
                        </button>
                    </form>
                    <form action="{{ url_for('report', message_id=msg.id) }}" method="POST">
                        <button type="submit" aria-label="Report"
                                class="text-yellow-600 hover:text-yellow-800 transition-colors duration-200">
                                  Signaler

                        </button>
                    </form>
                      <button onclick="quoteMessage('{{ msg.id }}', '{{ msg.content|escapejs }}')"
                            class="text-blue-500 hover:text-blue-700 transition-colors duration-200">
                        Citer
                    </button>
                </div>
            {% else %}
                <p class="italic">Message supprimé par modération.</p>  <!-- Message supprimé -->
            {% endif %}
        </div>
    {% else %}
        <p class="text-gray-600">Aucun message pour ce fil.</p>  <!-- Aucun message -->
    {% endfor %}
</div>

<div class="mt-6">  <!-- Marge en haut -->
    <h3 class="text-xl font-semibold mb-3">Répondre</h3>  <!-- Titre du formulaire -->
    <form method="POST" action="{{ url_for('thread', thread_id=thread.id) }}" class="space-y-4">  <!-- Formulaire de réponse -->
        <textarea name="content" id="reply-content" rows="5" placeholder="Votre réponse ici..." required
                  class="block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
        <div class="flex items-center space-x-4">  <!-- Boutons -->
            <button type="button" onclick="previewMessage()"
                    class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition-colors duration-200">
                Prévisualiser
            </button>
            <button type="submit"
                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
                Poster
            </button>
        </div>
    </form>
    <div id="preview-area" class="mt-4"></div>  <!-- Zone de prévisualisation -->
</div>

<script>
function previewMessage() {
    const content = document.getElementById('reply-content').value;
    fetch('{{ url_for('preview') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'content=' + encodeURIComponent(content)
    }).then(response => response.json())
      .then(data => {
          document.getElementById('preview-area').innerHTML = data.preview;
      });
}

function quoteMessage(messageId, content) {
    const replyArea = document.getElementById('reply-content');
    const quotedContent = `<div class="quoted-text"><p class="quoted-message-id">ID du message: ${messageId}</p>${content}</div>`;
    replyArea.value = quotedContent + "\n\n" + replyArea.value;
    replyArea.focus();
}
</script>
{% endblock %}