{% extends "base.html" %}
{% block title %}Create BBS — atbbs{% endblock %}
{% block content %}
<h1 class="text-lg text-neutral-200 mb-1">Create a BBS</h1>
<p class="text-neutral-500 mb-6">Set up your BBS. Your handle becomes the address.</p>

{% if error %}
<p class="text-red-500 mb-4">{{ error }}</p>
{% endif %}

<form method="post" class="space-y-6">
    <div>
        <label class="block text-neutral-400 mb-1">BBS Name</label>
        <input type="text" name="name" required placeholder="My Cool BBS"
            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">
    </div>

    <div>
        <label class="block text-neutral-400 mb-1">Description</label>
        <input type="text" name="description" placeholder="A short description of your BBS"
            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">
    </div>

    <div>
        <label class="block text-neutral-400 mb-1">Welcome Message</label>
        <textarea name="intro" rows="6" placeholder="ASCII art, rules, welcome message..."
            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>
    </div>

    <div>
        <label class="block text-neutral-400 mb-1">Boards</label>
        <p class="text-neutral-500 text-xs mb-2">One board per row: slug, name, description</p>
        <div id="board-rows" class="space-y-2">
            <div class="flex gap-2">
                <input type="text" name="board_slug" placeholder="general" class="w-1/4 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">
                <input type="text" name="board_name" placeholder="General Discussion" class="w-1/3 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">
                <input type="text" name="board_desc" placeholder="Whatever's on your mind." class="flex-1 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">
            </div>
        </div>
        <button type="button" id="add-board" class="mt-2 text-neutral-500 hover:text-neutral-300 text-xs">+ add board</button>
    </div>

    <button type="submit" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded">
        create bbs
    </button>
</form>

<script>
    document.getElementById("add-board").addEventListener("click", function() {
        const row = document.createElement("div");
        row.className = "flex gap-2";
        row.innerHTML = `
            <input type="text" name="board_slug" placeholder="slug" class="w-1/4 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">
            <input type="text" name="board_name" placeholder="Name" class="w-1/3 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">
            <input type="text" name="board_desc" placeholder="Description" class="flex-1 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">
        `;
        document.getElementById("board-rows").appendChild(row);
    });
</script>
{% endblock %}