{% extends "base.html" %}
{% block title %}{{ board.name }} — {{ 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>
<span class="text-neutral-400">{{ board.name }}</span>
{% endblock %}
{% block content %}
<div class="mb-6">
    <h1 class="text-lg text-neutral-200 mb-1">{{ board.name }}</h1>
    <p class="text-neutral-500">{{ board.description }}</p>
</div>

{% if g.user %}
<details class="mb-6 border border-neutral-800 rounded p-4">
    <summary class="text-neutral-300 cursor-pointer">new thread</summary>
    <form method="post" action="/bbs/{{ handle }}/board/{{ board.slug }}/new-thread" enctype="multipart/form-data" class="mt-4 space-y-3">
        <input
            type="text"
            name="title"
            placeholder="Thread title"
            required
            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"
        >
        <textarea
            name="body"
            placeholder="What's on your mind?"
            required
            rows="4"
            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"
        ></textarea>
        <label class="text-xs text-neutral-500 hover:text-neutral-300 cursor-pointer block">
            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">
            post
        </button>
    </form>
</details>
{% endif %}

<div id="threads" data-handle="{{ handle }}" data-slug="{{ board.slug }}">
    <p id="threads-loading" class="text-neutral-500">Loading threads...</p>
</div>
<div id="threads-next" class="mt-6 text-center hidden">
    <button id="load-more" class="text-neutral-500 hover:text-neutral-300">next page →</button>
</div>
{% endblock %}