{% extends "base.html" %}

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

{% block extra_styles %}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.container-fluid {
    max-width: 450px;
    padding: 0;
}

.login-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.brand-title {
    color: #60a5fa;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.brand-subtitle {
    color: #94a3b8;
    font-size: 0.95rem;
}

.btn-primary {
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}

.footer {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border: none;
}
{% 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">Network Security Scanner</p>
    </div>

    {% if password_not_set %}
        <div class="alert alert-warning">
            <strong>Setup Required:</strong> Please set an application password first.
            <a href="{{ url_for('auth.setup') }}" class="alert-link">Go to Setup</a>
        </div>
    {% else %}
        <form method="post" action="{{ url_for('auth.login') }}">
            <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
                       autofocus
                       placeholder="Enter your password">
            </div>

            <div class="mb-3 form-check">
                <input type="checkbox"
                       class="form-check-input"
                       id="remember"
                       name="remember">
                <label class="form-check-label" for="remember">
                    Remember me
                </label>
            </div>

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