{% extends "base.html" %}
{% block title %}Edit BBS — atbbs{% endblock %}
{% block content %}
<h1 class="text-lg text-neutral-200 mb-1">Edit BBS</h1>
<p class="text-neutral-500 mb-6">Update your BBS.</p>

<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 value="{{ bbs.site.name }}"
            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" value="{{ bbs.site.description }}"
            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"
            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">{{ bbs.site.intro }}</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">
            {% for board in bbs.site.boards %}
            <div class="flex gap-2">
                <input type="text" name="board_slug" value="{{ 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" value="{{ 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" value="{{ board.description }}" 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">
            </div>
            {% endfor %}
        </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">
        save changes
    </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 %}