{% extends "base.html" %}

{% block title %}Sign In - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="max-width: 420px; margin: 3rem auto;">
    <div class="card">
        <div class="card-header" style="justify-content: center; text-align: center; flex-direction: column; gap: 0.5rem;">
            <div style="font-size: 2.2rem;">🔒</div>
            <h2 class="card-title">Sign In</h2>
            <p style="color: var(--text-muted); font-size: 0.85rem;">Login to access VPN configuration and services</p>
        </div>

        <form method="POST" action="/login">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required autofocus placeholder="e.g. admin or your username">
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required placeholder="Enter password">
            </div>

            <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 0.5rem; padding: 0.75rem;">
                Sign In
            </button>
        </form>

        <div style="margin-top: 1.5rem; padding: 0.85rem; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 6px; font-size: 0.8rem; color: #93c5fd;">
            <strong>First Time Admin?</strong><br>
            Default username: <code style="background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px;">admin</code><br>
            Default password: <code style="background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px;">admin</code><br>
            <em>(You will be required to change your password immediately upon first login)</em>
        </div>
    </div>
</div>
{% endblock %}