{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/feed.css">
<link rel="stylesheet" href="/static/css/post.css">
{% endblock %}
{% block content %}
<div class="post-page">
    <a href="/feed" class="back-link">&larr; Back to Feed</a>

    <article class="post-detail">
        <div class="post-detail-header">
            <a href="/profile/{{ author['username'] if author else '#' }}">
            <img src="{{ avatar_url('multiavatar', author['username'] if author else '?', 40) }}" class="avatar-img avatar-md" alt="{{ author['username'] if author else '?' }}" loading="lazy">
            </a>
            <div>
                <a href="/profile/{{ author['username'] if author else '#' }}" class="post-detail-author">{{ author['username'] if author else 'Unknown' }}</a>
                {% if author and author.get('role') %}
                <span class="post-detail-role">&middot; {{ author['role'] }}</span>
                {% endif %}
            </div>
            <span class="post-detail-time">{{ time_ago }}</span>
        </div>

        <div class="topic-wrap">
            <span class="badge badge-{{ post['topic'] }}">{{ post['topic'] }}</span>
        </div>

        {% if post.get('title') %}
        <h1 class="post-detail-title">{{ post['title'] }}</h1>
        {% endif %}

        <div class="post-detail-content rendered-content" data-render>{{ post['content'] }}</div>

        {% if attachments %}
        {% include "_attachment_display.html" %}
        {% endif %}

        <div class="post-detail-actions">
            <div class="post-votes">
                <form method="POST" action="/votes/post/{{ post['uid'] }}" class="inline-form">
                    <input type="hidden" name="value" value="1">
                    <button type="submit" class="post-action-btn vote-up">+</button>
                </form>
                <span class="post-vote-count">{{ post.get('stars', 0) }}</span>
                <form method="POST" action="/votes/post/{{ post['uid'] }}" class="inline-form">
                    <input type="hidden" name="value" value="-1">
                    <button type="submit" class="post-action-btn vote-down">−</button>
                </form>
            </div>
            <button class="post-action-btn">&#x1F517; Share</button>
            {% if user and post['user_uid'] == user['uid'] %}
            <button class="post-action-btn" data-modal="edit-post-modal"><span class="icon">&#x270F;&#xFE0F;</span>Edit</button>
            <form method="POST" action="/posts/delete/{{ post['slug'] or post['uid'] }}" class="inline-form">
                <button type="submit" class="post-action-btn" data-confirm="Delete this post?"><span class="icon">&#x1F5D1;&#xFE0F;</span>Delete</button>
            </form>
            {% endif %}
        </div>
    </article>

    {% if user and post['user_uid'] == user['uid'] %}
    <div class="modal-overlay" id="edit-post-modal">
        <div class="card modal-card">
            <div class="modal-header">
                <h3>Edit Post</h3>
                <button type="button" class="modal-close btn-ghost btn-icon modal-close-btn">&times;</button>
            </div>
            <form id="edit-post-form" method="POST" action="/posts/edit/{{ post['slug'] or post['uid'] }}">
                <div class="form-row">
                    {% for t in topics %}
                    <label class="topic-label">
                        <input type="radio" name="topic" value="{{ t }}" {% if t == post['topic'] %}checked{% endif %} class="topic-radio">
                        {{ t|capitalize }}
                    </label>
                    {% endfor %}
                </div>
                <div class="auth-field auth-field-gap">
                    <label for="edit-title">Title</label>
                    <input type="text" id="edit-title" name="title" maxlength="500" value="{{ post.get('title', '') }}">
                </div>
                <div class="auth-field auth-field-gap">
                    <label for="edit-content">Content</label>
                    <textarea id="edit-content" name="content" required maxlength="2000" class="min-h-200" data-mention>{{ post['content'] }}</textarea>
                </div>
                {% include "_attachment_form.html" %}
                <div class="modal-footer">
                    <button type="button" class="modal-close btn btn-secondary">Cancel</button>
                    <button type="submit" class="btn btn-primary"><span class="icon">&#x1F4BE;</span>Save Changes</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% with target_uid=post['uid'], target_type="post" %}
    {% include "_comment_section.html" %}
    {% endwith %}

    {% if related_posts %}
    <section class="comments-section related-section">
        <h3>Related Discussions</h3>
        <div class="related-list">
            {% for item in related_posts %}
            <a href="/posts/{{ item.post['slug'] or item.post['uid'] }}" class="related-link">
                <strong class="related-title">{{ item.post.get('title') or item.post['content'][:60] }}</strong>
                <span class="related-meta">{{ item.author['username'] }} · {{ item.time_ago }}</span>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}