{% extends 'base.html' %}
{% load markdown %}

{% block title %}{{ announcement.title }} - Packs Site{% endblock %}

{% block content %}
<div class="announce-detail">
<article class="card announce-card">
    <h1>{{ announcement.title }}</h1>
    <p class="announce-meta">
        <i class="fas fa-user"></i> {{ announcement.created_by.username|default:"Staff" }}
        <span class="separator">•</span>
        {{ announcement.created_at|date:"F j, Y, g:i a" }}
    </p>
    <div class="markdown-body">{{ announcement.body|markdown }}</div>
    {% if user.is_staff %}
        <div class="announce-admin">
            <a href="{% url 'announcements:edit' announcement.pk %}" class="btn btn-secondary btn-sm"><i class="fas fa-edit"></i> Edit</a>
            <form method="post" action="{% url 'announcements:delete' announcement.pk %}" class="inline" onsubmit="return confirm('Delete this announcement and all its comments?');">
                {% csrf_token %}
                <button type="submit" class="btn btn-secondary btn-sm"><i class="fas fa-trash"></i> Delete</button>
            </form>
        </div>
    {% endif %}
</article>

<section class="card">
    <h2><i class="fas fa-comments"></i> Discussion</h2>

    {% if can_comment %}
        <form method="post" action="{% url 'announcements:add_comment' announcement.pk %}" class="comment-form">
            {% csrf_token %}
            <textarea name="body" rows="4" placeholder="Write a comment… Markdown supported." required></textarea>
            <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Comment</button>
        </form>
    {% else %}
        <p class="empty-hint"><a href="{% url 'profiles:login' %}?next={{ request.path }}" class="btn btn-secondary btn-sm">Log in</a> to join the discussion.</p>
    {% endif %}

    <div class="comment-list">
        {% for comment in comments %}
            <div class="comment" id="comment-{{ comment.pk }}">
                <div class="comment-head">
                    <strong>{{ comment.user.username }}</strong>
                    <span class="comment-time">{{ comment.created_at|timesince }} ago</span>
                    {% if comment.updated_at != comment.created_at %}<span class="comment-edited">· edited</span>{% endif %}
                    {% if can_comment and comment.user == user %}
                        <span class="comment-actions">
                            <a href="#" class="comment-edit btn btn-secondary btn-sm" data-comment="{{ comment.pk }}"><i class="fas fa-edit"></i> Edit</a>
                            <form method="post" action="{% url 'announcements:delete_comment' announcement.pk comment.pk %}" class="inline">
                                {% csrf_token %}
                                <button type="submit" class="link-btn" title="Delete"><i class="fas fa-trash"></i></button>
                            </form>
                        </span>
                    {% elif can_comment and user.is_staff %}
                        <span class="comment-actions">
                            <form method="post" action="{% url 'announcements:delete_comment' announcement.pk comment.pk %}" class="inline" title="Delete this comment">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-secondary btn-sm"><i class="fas fa-trash"></i> Delete</button>
                            </form>
                        </span>
                    {% endif %}
                </div>
                <div class="comment-body markdown-body">{{ comment.body|markdown }}</div>
                {% if can_comment and comment.user == user %}
                    <form method="post" action="{% url 'announcements:edit_comment' announcement.pk comment.pk %}" class="comment-edit-form" data-comment="{{ comment.pk }}" hidden>
                        {% csrf_token %}
                        <textarea name="body" rows="3" required>{{ comment.body }}</textarea>
                        <div class="comment-edit-actions">
                            <button type="submit" class="btn btn-primary btn-sm">Save</button>
                            <button type="button" class="btn btn-secondary btn-sm comment-edit-cancel">Cancel</button>
                        </div>
                    </form>
                {% endif %}
            </div>
        {% empty %}
            <p class="empty-hint">No comments yet.</p>
        {% endfor %}
    </div>
</section>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    document.querySelectorAll('.comment-edit').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const id = link.dataset.comment;
            const body = document.querySelector(`#comment-${id} .comment-body`);
            const form = document.querySelector(`#comment-${id} .comment-edit-form`);
            if (body) body.hidden = true;
            if (form) form.hidden = false;
        });
    });
    document.querySelectorAll('.comment-edit-cancel').forEach(btn => {
        btn.addEventListener('click', () => {
            const form = btn.closest('.comment-edit-form');
            const id = form.dataset.comment;
            const body = document.querySelector(`#comment-${id} .comment-body`);
            if (body) body.hidden = false;
            form.hidden = true;
        });
    });
})();
</script>
{% endblock %}