{% extends "base.html" %}
{% block title %}{{ thread.title }} — {{ bbs.site.name }}{% endblock %}
{% block breadcrumb %}
<span>/</span>
<a href="/bbs/{{ handle }}" class="text-neutral-500 hover:text-neutral-300">{{ bbs.site.name }}</a>
<span>/</span>
<a href="/bbs/{{ handle }}/board/{{ board.slug }}" class="text-neutral-500 hover:text-neutral-300">{{ board.name }}</a>
<span>/</span>
<span class="text-neutral-400 truncate">{{ thread.title }}</span>
{% endblock %}
{% block content %}
<article class="reply-card bg-neutral-900 border border-neutral-800 rounded p-4 mb-4">
    <div class="flex items-baseline justify-between mb-3">
        <div class="flex items-baseline gap-2">
            <span class="text-neutral-200">{{ thread.author.handle }}</span>
            <span class="text-neutral-600">&middot;</span>
            <time class="text-xs text-neutral-500 localtime" datetime="{{ thread.created_at }}" title="{{ thread.created_at | datetime }}">{{ thread.created_at | datetime }}</time>
        </div>
        <span class="reply-actions flex items-center gap-3">
            {% if g.user and g.user.did == thread.author.did %}
            <form method="post" action="/bbs/{{ handle }}/thread/{{ thread.author.did }}/{{ thread.uri.split('/')[-1] }}/delete" class="inline" onsubmit="return confirm('Delete this thread?')">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">delete</button>
            </form>
            {% endif %}
            {% if g.user and g.user.did == bbs.identity.did and g.user.did != thread.author.did %}
            <form method="post" action="/bbs/{{ handle }}/ban/{{ thread.author.did }}" class="inline" onsubmit="return confirm('Ban this user from your BBS?')">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">ban</button>
            </form>
            <form method="post" action="/bbs/{{ handle }}/hide" class="inline" onsubmit="return confirm('Hide this post?')">
                <input type="hidden" name="uri" value="{{ thread.uri }}">
                <button type="submit" class="text-xs text-neutral-500 hover:text-red-400">hide</button>
            </form>
            {% endif %}
        </span>
    </div>
    <h1 class="text-base text-neutral-200 font-bold mb-3">{{ thread.title }}</h1>
    <p class="text-neutral-400 whitespace-pre-wrap leading-relaxed">{{ thread.body }}</p>
    {% if thread.attachments %}
    <div class="mt-3 space-y-1">
        {% for att in thread.attachments %}
        <a href="{{ thread.author.pds }}/xrpc/com.atproto.sync.getBlob?did={{ thread.author.did }}&cid={{ att.file.ref['$link'] }}" target="_blank" class="text-xs text-neutral-500 hover:text-neutral-300 block">[{{ att.name }}]</a>
        {% endfor %}
    </div>
    {% endif %}
</article>

<div id="replies-nav-top" class="mb-4 text-center hidden"></div>
<div id="replies" class="space-y-2"
     data-thread-did="{{ thread.author.did }}"
     data-thread-tid="{{ thread.uri.split('/')[-1] }}"
     data-handle="{{ handle }}"
     data-user-did="{{ g.user.did if g.user else '' }}"
     data-user-handle="{{ g.user.handle if g.user else '' }}"
     data-user-pds="{{ g.user.pds_url if g.user else '' }}"
     data-sysop-did="{{ bbs.identity.did }}">
    <p id="replies-loading" class="text-neutral-500">Loading replies...</p>
</div>
<div id="replies-nav-bottom" class="mt-6 text-center hidden"></div>

{% if g.user %}
<form method="post" action="/bbs/{{ handle }}/thread/{{ thread.author.did }}/{{ thread.uri.split('/')[-1] }}/reply" enctype="multipart/form-data" class="mt-6 border border-neutral-800 rounded p-4">
    <input type="hidden" name="quote" id="quote-uri" value="">
    <div id="quote-preview" class="text-xs text-neutral-500 mb-2 hidden">
        <span id="quote-preview-text"></span>
        <button type="button" id="quote-clear" class="text-neutral-500 hover:text-red-400 ml-2">x</button>
    </div>
    <textarea
        name="body"
        placeholder="Write a reply..."
        id="reply-body"
        required
        rows="3"
        class="w-full bg-neutral-900 border border-neutral-800 rounded px-3 py-2 text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-neutral-600 resize-y mb-3"
    ></textarea>
    <label class="text-xs text-neutral-500 hover:text-neutral-300 cursor-pointer block mb-3">
        attach files
        <input type="file" name="attachments" multiple class="hidden" onchange="this.nextElementSibling.textContent = this.files.length ? [...this.files].map(f => f.name).join(', ') : ''">
        <span class="text-neutral-400 ml-2"></span>
    </label>
    <button type="submit" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded">
        reply
    </button>
</form>
{% endif %}

{% endblock %}