{% extends "base.html" %}
{% block title %}Account — atbbs{% endblock %}
{% block content %}
<div class="mb-6">
    <h1 class="text-lg text-neutral-200 mb-1">Account</h1>
    <p class="text-neutral-500">Logged in as <a href="https://pdsls.dev/at/{{ user.did }}" target="_blank" class="text-neutral-400 hover:text-neutral-300">{{ user.handle }}</a>.</p>
</div>

<!-- Tabs -->
<div class="flex gap-4 border-b border-neutral-800 mb-6">
    <button data-tab="inbox" id="tab-inbox" class="tab-btn py-2 text-neutral-200 border-b-2 border-neutral-200">Messages</button>
    {% if has_bbs %}
    <button data-tab="bbs" id="tab-bbs" class="tab-btn py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">{{ bbs_name }}</button>
    {% else %}
    <button data-tab="bbs" id="tab-bbs" class="tab-btn py-2 text-neutral-500 hover:text-neutral-300 border-b-2 border-transparent">Your BBS</button>
    {% endif %}
</div>

<!-- Inbox tab -->
<div id="panel-inbox">
    <div id="inbox" data-handle="{{ user.handle }}" data-did="{{ user.did }}" data-pds="{{ user.pds_url }}">
        <p id="inbox-loading" class="text-neutral-500">Loading...</p>
    </div>
    <div id="inbox-next" class="mt-4 text-center hidden">
        <button id="load-more" class="text-neutral-500 hover:text-neutral-300">show more</button>
    </div>
</div>

<!-- BBS tab -->
<div id="panel-bbs" class="hidden">
    {% if has_bbs %}
    <div class="grid grid-cols-2 gap-3 max-w-md">
        <a href="/bbs/{{ user.handle }}" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Browse</div>
            <div class="text-xs text-neutral-500">View your BBS.</div>
        </a>
        <a href="/account/edit" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Edit</div>
            <div class="text-xs text-neutral-500">Name, boards, intro.</div>
        </a>
        <a href="/account/moderate" class="bg-neutral-900 border border-neutral-800 rounded px-4 py-3 text-neutral-300 hover:text-white hover:border-neutral-700">
            <div class="text-neutral-200 mb-1">Moderate</div>
            <div class="text-xs text-neutral-500">Bans and hidden posts.</div>
        </a>
        <form method="post" action="/account/delete" onsubmit="return confirm('Are you sure? This will delete your site record, all board records, and all news records. Threads and replies from users will remain in their repos.')">
            <button type="submit" class="w-full text-left bg-neutral-900 border border-neutral-800 rounded px-4 py-3 hover:border-red-900">
                <div class="text-neutral-500 mb-1">Delete</div>
                <div class="text-xs text-neutral-600">Remove your BBS.</div>
            </button>
        </form>
    </div>
    {% else %}
    <p class="text-neutral-500 mb-4">You haven't set up a BBS yet.</p>
    <a href="/account/create" class="bg-neutral-800 hover:bg-neutral-700 text-neutral-200 px-4 py-2 rounded inline-block">
        create a bbs
    </a>
    {% endif %}
</div>

{% endblock %}