{% extends "base.html" %}
{% block title %}View Message{% endblock %}
{% block content %}
<section class="post-view">
    <h2>Secure Gotham Transmission</h2>

    <div class="post-box">
        <p><strong>From:</strong> {{ post.author.username if post.author else "Unknown" }}</p>
        <p><strong>To:</strong> {{ post.recipient }}</p>
        <hr>
        <div class="post-content">
            {{ post.content|safe }}
        </div>
    </div>

    {% if post.author_id == user.id %}
        <button id="bumpBtn" class="btn-secondary">Send Reminder to {{ post.recipient }}</button>
        <div id="bumpResult" style="display:none; margin-top: 15px;"></div>
    {% endif %}

    <a href="{{ url_for('dashboard') }}" class="btn-primary" style="margin-top: 20px;">Return to Dashboard</a>
</section>

<script>
const bumpBtn = document.getElementById("bumpBtn");
if (bumpBtn) {
    bumpBtn.addEventListener("click", async () => {
        bumpBtn.disabled = true;
        bumpBtn.textContent = "Sending...";
        
        try {
            const response = await fetch("{{ url_for('bump_recipient', post_id=post.id) }}", {
                method: "POST",
                headers: { "Content-Type": "application/json" }
            });

            const data = await response.json();
            const resultDiv = document.getElementById("bumpResult");
            resultDiv.style.display = "block";
            resultDiv.textContent = data.message;
            resultDiv.className = "flash " + (data.status === "ok" ? "success" : "danger");
        } catch (error) {
            alert("Error: " + error.message);
        } finally {
            bumpBtn.disabled = false;
            bumpBtn.textContent = "Send Reminder to {{ post.recipient }}";
        }
    });
}
</script>
{% endblock %}