{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% 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>
                {% set _user = author %}{% set _class = "post-detail-author" %}{% include "_user_link.html" %}
                {% if is_admin(user) and 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 %}

        {% if poll %}
        {% set _poll = poll %}{% include "_poll.html" %}
        {% endif %}

        <div class="post-detail-actions">
            {% set _uid = post['uid'] %}{% set _my_vote = my_vote %}{% set _count = post.get('stars', 0) %}{% include "_post_votes.html" %}
            {% set _type = "post" %}{% set _uid = post['uid'] %}{% set _reactions = reactions %}{% include "_reaction_bar.html" %}
            <button type="button" class="post-action-btn" data-share="/posts/{{ post['slug'] or post['uid'] }}">&#x1F517; Share</button>
            {% set _type = "post" %}{% set _uid = post['uid'] %}{% set _bookmarked = bookmarked %}{% include "_bookmark_button.html" %}
            {% if is_owner %}
            <button type="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 is_owner %}
    {% call modal('edit-post-modal', 'Edit Post') %}
            <form id="edit-post-form" method="POST" action="/posts/edit/{{ post['slug'] or post['uid'] }}">
                {% set _topics = topics %}{% set _selected = post['topic'] %}{% include "_topic_selector.html" %}
                <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" %}
                {% if not poll %}
                <div class="auth-field auth-field-gap">
                    <button type="button" class="btn btn-secondary btn-sm" data-poll-toggle><span class="icon">&#x1F4CA;</span> <span data-poll-toggle-label>Add poll</span></button>
                </div>
                <div class="poll-builder" data-poll-builder hidden>
                    <input type="text" name="poll_question" maxlength="200" placeholder="Poll question" class="poll-builder-question" disabled>
                    <div class="poll-builder-options" data-poll-options>
                        <div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 1" disabled></div>
                        <div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 2" disabled></div>
                    </div>
                    <button type="button" class="btn-ghost btn-sm" data-poll-add-option>+ Add option</button>
                    <p class="poll-builder-error" data-poll-error hidden></p>
                </div>
                {% endif %}
                <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>
    {% endcall %}
    {% 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 %}