{% extends "base.html" %}

{% block title %}Private Access - YRTV{% endblock %}

{% block content %}
<div class="mx-auto flex min-h-[620px] max-w-3xl items-center justify-center px-4">
    <div class="w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900">
        <div class="bg-gradient-to-br from-slate-950 via-yrtv-950 to-slate-900 px-8 py-10 text-white">
            <div class="text-xs font-black uppercase tracking-[0.3em] text-yrtv-300">{{ brand.primary }} Private Analytics</div>
            <h1 class="mt-4 text-3xl font-black">这是一座私人战队数据站</h1>
            <p class="mt-3 text-sm leading-7 text-slate-300">输入战队提供的访问密码后，可以查看比赛、职业主页、发现、荣誉和战队履历。</p>
        </div>
        <div class="p-8">
            {% with messages = get_flashed_messages(with_categories=true) %}
            {% for category, message in messages %}
            <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{{ message }}</div>
            {% endfor %}
            {% endwith %}
            <form method="POST" class="space-y-4">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                <div>
                    <label class="text-xs font-black uppercase tracking-wider text-slate-500">Viewer Token</label>
                    <input type="password" name="token" required class="mt-2 block w-full rounded-xl border-slate-200 bg-slate-50 px-4 py-3 focus:border-yrtv-500 focus:ring-yrtv-500 dark:border-slate-700 dark:bg-slate-800" placeholder="输入访问密码">
                </div>
                <button class="w-full rounded-xl bg-yrtv-600 px-5 py-3 font-black text-white hover:bg-yrtv-500">进入 YRTV</button>
            </form>
            <div class="mt-6 text-center text-xs text-slate-400">Protected by {{ brand.signature }}</div>
        </div>
    </div>
</div>
{% endblock %}