{% extends "base.html" %}

{% block title %}{{ t.setup_heading }} | {{ t.site_name }}{% endblock title %}

{% block head_extra %}
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
    .setup-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2rem 2.5rem; width: 100%; max-width: 400px; }
    .setup-card h1 { margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
    .setup-card label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9rem; }
    .setup-card input[type="text"],
    .setup-card input[type="password"] { width: 100%; padding: .5rem .7rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: .95rem; }
    .setup-card button { display: block; width: 100%; padding: .6rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; background: #1a1a2e; color: #fff; }
    .setup-card button:hover { background: #16213e; }
    .setup-card .flash { color: #856404; background: #fff3cd; padding: .5rem .75rem; border-radius: 4px; margin-bottom: 1rem; text-align: center; font-size: .9rem; }
</style>
{% endblock head_extra %}

{% block body %}
<div class="setup-card">
    <h1>{{ t.setup_heading }}</h1>

    {% if !message.is_empty() %}
    <div class="flash">{{ message }}</div>
    {% endif %}

    <form method="post" action="/admin/setup">
        <label for="username">{{ t.setup_username }}</label>
        <input type="text" name="username" id="username" required>
        <label for="password">{{ t.setup_password }}</label>
        <input type="password" name="password" id="password" required>
        <label for="confirm_password">{{ t.setup_confirm }}</label>
        <input type="password" name="confirm_password" id="confirm_password" required>
        <button type="submit">{{ t.setup_submit }}</button>
    </form>
</div>
{% endblock body %}