{% extends "base.html" %}
{% block title %}{{ thread.title }}{% endblock %}
{% block content %}
<h2>{{ thread.title }}</h2>
<p>Créé le {{ thread.timestamp.strftime('%d/%m/%Y %H:%M:%S') }}</p>
<hr>
<h3>Messages</h3>
{% for msg in messages %}
    <div class="message {% if msg.removed %}removed{% endif %}">
        {% if not msg.removed %}
            <p>{{ msg.content | safe }}</p>
            <small>Posté le {{ msg.timestamp.strftime('%d/%m/%Y %H:%M:%S') }} - Votes: {{ msg.vote_count }}</small>
            <div class="message-actions">
                <form action="{{ url_for('vote', message_id=msg.id, action='up') }}" method="POST" style="display:inline;">
                    <button type="submit">Upvote</button>
                </form>
                <form action="{{ url_for('vote', message_id=msg.id, action='down') }}" method="POST" style="display:inline;">
                    <button type="submit">Downvote</button>
                </form>
                <form action="{{ url_for('report', message_id=msg.id) }}" method="POST" style="display:inline;">
                    <button type="submit">Signaler</button>
                </form>
                <button onclick="quoteMessage('{{ msg.id }}', '{{ msg.content|escapejs }}')">Citer</button>
            </div>
        {% else %}
            <p><em>Message supprimé par modération.</em></p>
        {% endif %}
    </div>
    <hr>
{% else %}
    <p>Aucun message pour ce fil.</p>
{% endfor %}
<hr>
<h3>Répondre</h3>
<form method="POST" action="{{ url_for('thread', thread_id=thread.id) }}">
    <textarea name="content" id="reply-content" rows="5" placeholder="Votre réponse ici..." required></textarea><br>
    <button type="button" onclick="previewMessage()">Prévisualiser</button>
    <button type="submit">Poster</button>
</form>
<div id="preview-area"></div>
<script>
// Prévisualisation via l'API /preview
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;
      });
}
// Fonction de citation : ajoute le contenu cité dans la zone de réponse
function quoteMessage(messageId, content) {
    const replyArea = document.getElementById('reply-content');
    replyArea.value = "> " + content + "\n\n" + replyArea.value;
    replyArea.focus();
}
</script>
{% endblock %}