{% extends "base.html" %}

{% block title %}Setup - SneakyScanner{% endblock %}

{% set hide_nav = true %}

{% block content %}
<div class="login-card">
    <div class="text-center mb-4">
        <h1 class="brand-title">SneakyScanner</h1>
        <p class="brand-subtitle">Initial Setup</p>
    </div>

    <div class="alert alert-info mb-4">
        <i class="bi bi-info-circle me-1"></i>
        <strong>Welcome!</strong> Please set an application password to secure your scanner.
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <form method="post" action="{{ url_for('auth.setup') }}">
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password"
                   class="form-control form-control-lg"
                   id="password"
                   name="password"
                   required
                   minlength="8"
                   autofocus
                   placeholder="Enter password (min 8 characters)">
            <div class="form-text">Password must be at least 8 characters long.</div>
        </div>

        <div class="mb-4">
            <label for="confirm_password" class="form-label">Confirm Password</label>
            <input type="password"
                   class="form-control form-control-lg"
                   id="confirm_password"
                   name="confirm_password"
                   required
                   minlength="8"
                   placeholder="Confirm your password">
        </div>

        <button type="submit" class="btn btn-primary btn-lg w-100">
            Set Password
        </button>
    </form>
</div>
{% endblock %}