{% extends "base.html" %}
{% block title %}Moderate BBS — atbbs{% endblock %}
{% block content %}
<h1 class="text-lg text-neutral-200 mb-1">Moderate BBS</h1>
<p class="text-neutral-500 mb-6">Manage banned users and hidden posts.</p>

<div class="space-y-8">
    <div>
        <label class="block text-neutral-400 mb-3">Banned Users</label>
        <div class="space-y-1 mb-3">
            {% for did in bbs.site.banned_dids %}
            <div class="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900" title="{{ did }}">
                <a href="https://pdsls.dev/at/{{ did }}" target="_blank" class="truncate text-neutral-300 hover:text-white">{{ banned_handles.get(did, did) }}</a>
                {% if did in ban_rkeys %}
                <form method="post" action="/bbs/{{ handle }}/unban/{{ ban_rkeys[did] }}" class="inline" onsubmit="return confirm('Unban this user?')">
                    <button type="submit" class="text-xs text-neutral-500 hover:text-red-400 shrink-0">unban</button>
                </form>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        <form method="post" action="/bbs/{{ handle }}/ban" class="flex gap-2">
            <input type="text" name="identifier" placeholder="handle to ban" 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">
            <button type="submit" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-3 py-2 rounded text-xs">ban</button>
        </form>
    </div>

    <div>
        <label class="block text-neutral-400 mb-3">Hidden Posts</label>
        <div class="space-y-1 mb-3">
            {% for post in hidden_posts %}
            <div class="flex items-center justify-between gap-3 px-3 py-2 -mx-3 rounded hover:bg-neutral-900" title="{{ post.uri }}">
                <a href="https://pdsls.dev/{{ post.uri }}" target="_blank" class="truncate text-neutral-300 hover:text-white">{{ post.handle }} — {{ post.title or post.body }}</a>
                {% if post.uri in hide_rkeys %}
                <form method="post" action="/bbs/{{ handle }}/unhide/{{ hide_rkeys[post.uri] }}" class="inline" onsubmit="return confirm('Unhide this post?')">
                    <button type="submit" class="text-xs text-neutral-500 hover:text-red-400 shrink-0">unhide</button>
                </form>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        <div class="flex gap-2">
            <input type="text" id="hide-uri-input" placeholder="at://did/collection/rkey" 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">
            <button type="button" id="add-hidden" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-3 py-2 rounded text-xs">hide</button>
        </div>
    </div>
</div>

<script>
    document.getElementById("add-hidden").addEventListener("click", function() {
        const input = document.getElementById("hide-uri-input");
        const uri = input.value.trim();
        if (!uri || !uri.startsWith("at://")) { alert("Enter a valid AT-URI."); return; }

        const form = document.createElement("form");
        form.method = "post";
        form.action = "/bbs/{{ handle }}/hide";
        const field = document.createElement("input");
        field.type = "hidden";
        field.name = "uri";
        field.value = uri;
        form.appendChild(field);
        document.body.appendChild(form);
        form.submit();
    });

</script>
{% endblock %}