{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/feed.css') }}">
<link rel="stylesheet" href="{{ static_url('/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">
            {% set _user = author %}{% set _size = 40 %}{% set _size_class = "md" %}{% include "_avatar_link.html" %}
            <div>
                {% set _user = author %}{% set _class = "post-detail-author" %}{% include "_user_link.html" %}
                <span class="post-detail-level">&middot; Level {{ author.get('level', 1) if author else 1 }}</span>
            </div>
            <span class="post-detail-time">{{ dt_ago(post.created_at) if post.get('created_at') else 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">{{ render_title(post['title'], author_is_admin=is_admin(author)) }}</h1>
        {% endif %}

        <div class="post-detail-content rendered-content">{{ render_content(post['content'], author_is_admin=is_admin(author)) }}</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'] }}"><span class="icon">&#x1F517;</span><span class="label"> Share</span></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><span class="label">Edit</span></button>
            {% endif %}
            {% if is_owner or is_admin(user) %}
            <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><span class="label">Delete</span></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') or '' }}">
                </div>
                <div class="auth-field auth-field-gap">
                    <label for="edit-content">Content</label>
                    <textarea id="edit-content" name="content" required maxlength="125000" 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" aria-label="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" aria-label="Poll option 1" disabled></div>
                        <div class="poll-builder-row"><input type="text" name="poll_options" maxlength="100" placeholder="Option 2" aria-label="Poll 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">{{ render_title(item.post['title'], author_is_admin=is_admin(item.author)) if item.post.get('title') else content_preview(item.post['content'], 60) }}</strong>
                <span class="related-meta">{{ item.author['username'] }} &middot; {{ dt_ago(item.created_at) if item.created_at else item.time_ago }}</span>
            </a>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}