{% extends "base.html" %}

{% block title %}Login | FoxFitt{% endblock %}

{% block content %}
<!-- === LOGIN PAGE — full-screen centred with premium orange theme === -->
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-body); position: relative; overflow: hidden;">

    <!-- Decorative orange glow -->
    <div style="position: absolute; top: -200px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%); pointer-events: none;"></div>
    <div style="position: absolute; bottom: -200px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(232, 133, 26, 0.08) 0%, transparent 70%); pointer-events: none;"></div>

    <div class="card" style="width: 100%; max-width: 420px; position: relative; z-index: 1;">
        <div class="card-body p-4 p-md-5">

            <!-- Brand icon + name -->
            <div class="text-center mb-4">
                <div class="sidebar-brand__icon mx-auto mb-3" style="width: 48px; height: 48px; font-size: 1.25rem;">
                    <i class="fas fa-bolt"></i>
                </div>
                <h1 class="mb-1" style="font-size: 2rem;">
                    <span style="color: var(--accent); font-weight: 700;">Fox</span><span style="font-weight: 700;">Fitt</span>
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.85rem;">Payroll Management System</p>
            </div>

            <!-- Error message -->
            {% if form.errors %}
            <div class="alert alert-danger d-flex align-items-center" role="alert" style="font-size: 0.875rem;">
                <i class="fas fa-exclamation-circle me-2"></i>
                Your username and password didn't match. Please try again.
            </div>
            {% endif %}

            <!-- Login form -->
            <form method="post" action="{% url 'login' %}">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="id_username" class="form-label">Username</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user" style="width: 1rem; text-align: center;"></i></span>
                        <input type="text" name="username" class="form-control form-control-lg" id="id_username" placeholder="Enter username" required autofocus>
                    </div>
                </div>
                <div class="mb-4">
                    <label for="id_password" class="form-label">Password</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock" style="width: 1rem; text-align: center;"></i></span>
                        <input type="password" name="password" class="form-control form-control-lg" id="id_password" placeholder="Enter password" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-accent btn-lg w-100">
                    <i class="fas fa-sign-in-alt me-2"></i>Login
                </button>
            </form>

            <!-- Theme toggle (since sidebar isn't visible on login page) -->
            <div class="text-center mt-4 pt-3" style="border-top: 1px solid var(--border-subtle);">
                <button type="button" class="theme-toggle" id="loginThemeToggle" style="border-color: var(--border-default); color: var(--text-secondary); margin: 0 auto;">
                    <i class="fas fa-moon" id="loginThemeIcon"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Theme toggle for login page (sidebar toggle is hidden when not authenticated) -->
<script>
(function() {
    var toggle = document.getElementById('loginThemeToggle');
    var icon = document.getElementById('loginThemeIcon');
    if (!toggle || !icon) return;

    function updateLoginToggle() {
        var isDark = document.documentElement.getAttribute('data-theme') !== 'light';
        icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
    }

    updateLoginToggle();

    toggle.addEventListener('click', function() {
        var current = document.documentElement.getAttribute('data-theme');
        var next = (current === 'light') ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', next);
        localStorage.setItem('foxfitt-theme', next);
        updateLoginToggle();
    });
})();
</script>
{% endblock %}