{% extends "base.html" %}

{% block title %}{{ post.subject }} - {{ config.BBS_NAME }}{% endblock %}

{% block content %}
<!-- Original Post -->
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>
            {% if post.is_pinned %}<i class="bi bi-pin-angle-fill text-warning" title="{{ t('boards.pinned', 'Pinned') }}"></i>{% endif %}
            {% if post.is_locked %}<i class="bi bi-lock-fill text-danger" title="{{ t('boards.locked', 'Locked') }}"></i>{% endif %}
            {{ post.subject }}
        </span>
        <small>{{ post.created_at|eastern('%Y-%m-%d %H:%M:%S') }}</small>
    </div>
    <div class="card-body">
        <button type="button" id="postToggleMd" class="btn btn-link btn-sm p-0 mb-2">
            <i class="bi bi-markdown"></i> {{ t('boards.toggle_markdown', 'Toggle Markdown view') }}
        </button>
        <a href="{{ url_for('boards.view_post_ansi', post_id=post.id) }}" class="btn btn-link btn-sm p-0 mb-2 ms-2">
            <i class="bi bi-tv"></i> {{ t('boards.ansi_view', 'ANSI view') }}
        </a>
        {% if current_user.is_authenticated %}
        <button type="button" class="btn btn-link btn-sm p-0 mb-2 ms-2"
                data-quote-author="{{ post.author.username }}"
                data-quote-target=""
                data-quote-text="{{ post.content | e }}">
            <i class="bi bi-quote"></i> {{ t('boards.quote', 'Quote') }}
        </button>
        {% endif %}
        <span class="ms-3">
            {% set msg_type = 'post' %}{% set msg_id = post.id %}
            {% include '_vote_buttons.html' %}
        </span>
        <div id="postBodyPlain" class="ansi-body" style="white-space: pre-wrap;">{{ post.content | msgbody_rich }}</div>
        <div id="postBodyMd" style="display:none;" data-md-url="{{ url_for('boards.view_post_markdown', post_id=post.id) }}"></div>
        {% if post.author and post.author.signature %}
        <div class="mt-3 pt-2 small text-muted" style="border-top:1px dashed var(--theme-border); white-space: pre-wrap;">
            -- <br>{{ post.author.signature }}
        </div>
        {% endif %}
        <script>
        (function() {
            const btn = document.getElementById('postToggleMd');
            const plain = document.getElementById('postBodyPlain');
            const md = document.getElementById('postBodyMd');
            if (!btn || !plain || !md) return;
            let loaded = false;
            btn.addEventListener('click', () => {
                const showMd = plain.style.display !== 'none';
                if (showMd && !loaded) {
                    loaded = true;
                    md.textContent = {{ t('boards.loading', 'Loading…')|tojson }};
                    fetch(md.dataset.mdUrl)
                        .then(r => r.json())
                        .then(data => { md.innerHTML = data.html; })
                        .catch(() => { md.textContent = {{ t('boards.markdown_failed', 'Failed to load Markdown view.')|tojson }}; loaded = false; });
                }
                plain.style.display = showMd ? 'none' : '';
                md.style.display = showMd ? '' : 'none';
            });
        })();
        </script>
        <hr style="border-color: #00ff00;">
        <div class="d-flex justify-content-between align-items-center">
            <small>
                {{ t('boards.posted_by', 'Posted by') }} <a href="{{ url_for('profile.view_user', username=post.author.username) }}">{{ post.author.username }}</a>
                {% set _gm = (post.author.group_memberships.first() if post.author.group_memberships else None) %}
                {% if _gm and _gm.group and _gm.group.tag %}
                    <span class="badge bg-secondary" title="{{ _gm.group.name }}">{{ _gm.group.tag }}</span>
                {% endif %}
                {{ t('boards.in', 'in') }} <a href="{{ url_for('boards.view_board', board_id=post.board.id) }}">{{ post.board.name }}</a>
            </small>
            {% if current_user.is_authenticated %}
            <div class="d-flex gap-2">
                {% if current_user.is_admin or (current_user.moderating and (current_user.moderating | selectattr('board_id', 'equalto', post.board_id) | list | length) > 0) %}
                <form method="POST" action="{{ url_for('boards.toggle_pin', post_id=post.id) }}" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="btn btn-sm btn-outline-warning" title="{{ t('boards.toggle_pin', 'Toggle pin') }}">
                        <i class="bi bi-pin-angle"></i> {% if post.is_pinned %}{{ t('boards.unpin', 'Unpin') }}{% else %}{{ t('boards.pin', 'Pin') }}{% endif %}
                    </button>
                </form>
                <form method="POST" action="{{ url_for('boards.toggle_lock', post_id=post.id) }}" class="d-inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="btn btn-sm btn-outline-danger" title="{{ t('boards.toggle_lock', 'Toggle lock') }}">
                        <i class="bi bi-lock"></i> {% if post.is_locked %}{{ t('boards.unlock', 'Unlock') }}{% else %}{{ t('boards.lock', 'Lock') }}{% endif %}
                    </button>
                </form>
                {% endif %}
                {% if current_user.id == post.author_id or current_user.is_admin %}
                <form method="POST" action="{{ url_for('boards.delete_post', post_id=post.id) }}" class="d-inline" onsubmit="return confirm({{ t('boards.delete_post_confirm', 'Are you sure you want to delete this post?')|tojson|forceescape }});">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-danger btn-sm">
                        <i class="bi bi-trash"></i> {{ t('boards.delete', 'Delete') }}
                    </button>
                </form>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Replies -->
{% if replies %}
    <div class="card mb-3">
        <div class="card-header">
            <i class="bi bi-chat-dots"></i> {{ t('boards.replies_count', 'Replies ({count})', count=replies|length) }}
        </div>
        <div class="card-body">
            {% for reply, depth in replies %}
                <div class="mb-3 p-3"
                     style="background-color:var(--theme-card-bg);
                            border:1px solid var(--theme-primary);
                            border-radius:5px;
                            margin-left:{{ (depth * 24) }}px;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong>
                            <a href="{{ url_for('profile.view_user', username=reply.author.username) }}">{{ reply.author.username }}</a>
                            {% if depth > 0 %}
                              <small class="text-muted">↳ {{ t('boards.reply_depth', 'depth {depth}', depth=depth) }}</small>
                            {% endif %}
                        </strong>
                        <small>{{ reply.created_at|eastern('%Y-%m-%d %H:%M:%S') }}</small>
                    </div>
                    <div class="ansi-body" style="white-space: pre-wrap;">{{ reply.content | msgbody_rich }}</div>
                    {% if reply.author and reply.author.signature %}
                    <div class="mt-2 pt-1 small text-muted" style="border-top:1px dashed var(--theme-border); white-space: pre-wrap;">
                        -- <br>{{ reply.author.signature }}
                    </div>
                    {% endif %}
                    <div class="d-flex gap-2">
                    {% if current_user.is_authenticated %}
                        <button type="button" class="btn btn-link btn-sm p-0"
                                onclick="document.getElementById('replyTo').value='{{ reply.id }}';
                                         document.getElementById('replyToLabel').textContent={{ t('boards.replying_to', 'Replying to {author}', author=reply.author.username)|tojson|forceescape }};
                                         document.getElementById('replyForm').scrollIntoView({behavior:'smooth'});">
                            <i class="bi bi-reply"></i> {{ t('boards.reply', 'Reply') }}
                        </button>
                        <button type="button" class="btn btn-link btn-sm p-0 ms-2"
                                data-quote-author="{{ reply.author.username }}"
                                data-quote-target="{{ reply.id }}"
                                data-quote-text="{{ reply.content | e }}">
                            <i class="bi bi-quote"></i> {{ t('boards.quote', 'Quote') }}
                        </button>
                    {% endif %}
                    {% if current_user.is_authenticated and (current_user.id == reply.author_id or current_user.is_admin) %}
                        <form method="POST" action="{{ url_for('boards.delete_post', post_id=reply.id) }}" class="d-inline" onsubmit="return confirm({{ t('boards.delete_reply_confirm', 'Are you sure you want to delete this reply?')|tojson|forceescape }});">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-danger btn-sm">
                                <i class="bi bi-trash"></i> {{ t('boards.delete', 'Delete') }}
                            </button>
                        </form>
                    {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

{% if current_user.is_authenticated %}
<div class="mb-3 d-flex gap-2 align-items-center flex-wrap">
    <form method="post" action="{{ url_for('saved.add') }}" class="d-inline-block">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="kind" value="post">
        <input type="hidden" name="target_id" value="{{ post.id }}">
        <button type="submit" class="btn btn-outline-warning btn-sm">
            <i class="bi bi-bookmark-star"></i> {{ t('boards.save_post', 'Save Post') }}
        </button>
    </form>
    {% set reactions = (post.reactions | list) if post.reactions else [] %}
    {% set my_kinds = (reactions | selectattr('user_id', 'equalto', current_user.id) | map(attribute='kind') | list) %}
    {% set rcount = {} %}
    {% for r in reactions %}
        {% set _ = rcount.update({r.kind: rcount.get(r.kind, 0) + 1}) %}
    {% endfor %}
    {% for kind, label in [('like','👍'),('heart','❤️'),('lol','😂'),('wow','😮'),('sad','😢')] %}
    <form method="post" action="{{ url_for('boards.react', post_id=post.id) }}" class="d-inline-block">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" name="kind" value="{{ kind }}">
        <button type="submit" class="btn btn-sm {% if kind in my_kinds %}btn-warning{% else %}btn-outline-secondary{% endif %}">
            {{ label }} {{ rcount.get(kind, 0) }}
        </button>
    </form>
    {% endfor %}
</div>
{% endif %}

<!-- Reply Form -->
{% if post.is_locked and not current_user.is_admin %}
    <div class="card"><div class="card-body text-muted">
        <i class="bi bi-lock"></i> {{ t('boards.thread_locked', 'This thread is locked.') }}
    </div></div>
{% elif current_user.is_authenticated %}
    <div class="card" id="replyForm">
        <div class="card-header d-flex justify-content-between">
            <span><i class="bi bi-reply"></i> {{ t('boards.post_reply', 'Post Reply') }}</span>
            <small id="replyToLabel" class="text-muted">{{ t('boards.replying_to_thread', 'Replying to thread') }}</small>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('boards.reply_post', post_id=post.id) }}">
                {{ form.hidden_tag() }}
                <input type="hidden" name="reply_to" id="replyTo" value="">

                <div class="mb-3">
                    {{ form.content(class="form-control", rows=5, placeholder=t('boards.reply_placeholder', 'Write your reply...')) }}
                    {% if form.content.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in form.content.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="mb-2">
                    <label for="reply_tagline_id" class="form-label">{{ t('boards.add_tagline', 'Add a tagline (optional)') }}</label>
                    <select name="tagline_id" id="reply_tagline_id" class="form-select" size="6">
                        <option value="">{{ t('boards.no_tagline', '-- None --') }}</option>
                        {% for t in taglines %}
                        <option value="{{ t.id }}">{{ t.text }}</option>
                        {% endfor %}
                    </select>
                </div>

                {{ form.submit(class="btn btn-primary") }}
                <button type="button" class="btn btn-link btn-sm"
                        onclick="document.getElementById('replyTo').value='';
                                 document.getElementById('replyToLabel').textContent={{ t('boards.replying_to_thread', 'Replying to thread')|tojson|forceescape }};">
                    {{ t('boards.reset_reply', 'Reset to top-level reply') }}
                </button>
            </form>
        </div>
    </div>
{% else %}
    <div class="card">
        <div class="card-body text-center">
            <p>{{ t('boards.please_login_prefix', 'Please') }} <a href="{{ url_for('auth.login') }}">{{ t('boards.login', 'login') }}</a> {{ t('boards.login_to_reply', 'to reply to this post.') }}</p>
        </div>
    </div>
{% endif %}
<script>
(function() {
    document.querySelectorAll('[data-quote-text]').forEach(btn => {
        btn.addEventListener('click', () => {
            const ta = document.querySelector('#replyForm textarea');
            if (!ta) return;
            const author = btn.dataset.quoteAuthor || {{ t('boards.someone', 'someone')|tojson }};
            const target = btn.dataset.quoteTarget || '';
            const txt = btn.dataset.quoteText || '';
            const quoted = txt.split(/\r?\n/).map(l => '> ' + l).join('\n');
            const insertion = (ta.value ? '\n\n' : '') +
                              {{ t('boards.quote_wrote', '{author} wrote:')|tojson }}.replace('{author}', author) + '\n' + quoted + '\n\n';
            ta.value = ta.value + insertion;
            if (target) {
                const rt = document.getElementById('replyTo');
                const lbl = document.getElementById('replyToLabel');
                if (rt) rt.value = target;
                if (lbl) lbl.textContent = {{ t('boards.replying_to', 'Replying to {author}')|tojson }}.replace('{author}', author);
            }
            ta.focus();
            ta.scrollIntoView({behavior:'smooth'});
        });
    });
})();
</script>
{% endblock %}