{% extends "base.html" %}

{% block title %}First Setup - YRTV{% endblock %}

{% block content %}
<div class="mx-auto max-w-3xl px-4 py-8">
    <div class="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-r from-yrtv-700 to-slate-900 p-8 text-white">
            <div class="text-xs font-black uppercase tracking-[0.3em] text-yrtv-200">{{ brand.primary }} Self-hosted</div>
            <h1 class="mt-3 text-3xl font-black">创建你的私人战队 HLTV</h1>
            <p class="mt-3 text-sm text-slate-200">这一步只建立战队与 roster，不会生成或修改比赛数据。之后从 Admin 上传自己的 iframe_network.json。</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-5">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                <div>
                    <label class="text-xs font-black uppercase tracking-wider text-slate-500">战队名称</label>
                    <input name="name" required class="mt-2 block w-full rounded-xl border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800" placeholder="My Team">
                </div>
                <div>
                    <label class="text-xs font-black uppercase tracking-wider text-slate-500">说明</label>
                    <input name="description" class="mt-2 block w-full rounded-xl border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800" placeholder="Private CS2 roster">
                </div>
                <div>
                    <label class="text-xs font-black uppercase tracking-wider text-slate-500">Roster Steam ID</label>
                    <textarea name="steam_ids" rows="8" required class="mt-2 block w-full rounded-xl border-slate-200 bg-slate-50 px-4 py-3 font-mono text-sm dark:border-slate-700 dark:bg-slate-800" placeholder="每行一个 Steam ID"></textarea>
                    <p class="mt-2 text-xs text-slate-400">支持换行或逗号分隔。后续可在 Clubhouse 修改。</p>
                </div>
                <button class="w-full rounded-xl bg-yrtv-600 px-5 py-3 font-black text-white hover:bg-yrtv-500">创建战队并进入后台</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}