{% extends "layout.html" %}
{% block title %}Login - Runit{% endblock %}
{% block content %}
<div class="auth-container">
    <div class="auth-card fade-in">
        <div class="auth-header">
            <div class="auth-logo">runit</div>
            <div class="auth-title">Sign in to your account</div>
        </div>
        <div class="auth-body">
            <form action="{{ login_action }}" method="post">
                <input type="hidden" name="_csrf_token" value="{{ get_csrf_token(request) }}">
                
                {% for (category, message) in get_flashed_messages(request) %}
                <div class="alert alert-{{ category }} mb-3">
                    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
                    <span>{{ message }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                {% endfor %}
                
                <div class="form-group">
                    <label class="form-label" for="username">Email Address</label>
                    <input type="email" class="form-control" name="username" id="username" required placeholder="you@example.com">
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="password">Password</label>
                    <input type="password" class="form-control" name="password" id="password" required placeholder="Enter your password">
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <label class="form-check d-flex align-items-center gap-2 cursor-pointer">
                        <input type="checkbox" class="form-check-input" name="remember_me">
                        <span class="text-muted" style="font-size: 0.875rem;">Remember me</span>
                    </label>
                    <a href="{{ request.url_for('login') }}" class="text-accent" style="font-size: 0.875rem;">Forgot password?</a>
                </div>
                
                <button type="submit" class="btn btn-accent w-100">
                    <i class="fas fa-arrow-right fa-fw"></i>
                    Sign In
                </button>
            </form>
        </div>
        <div class="auth-footer">
            Don't have an account? <a href="{{ register_page_url }}">Create one</a>
        </div>
    </div>
    <a href="{{ request.url_for('admin_login_page') }}" class="position-absolute" style="bottom: 20px; right: 20px; opacity: 0.5;" title="Admin Login">
        <i class="fas fa-user-shield fa-lg"></i>
    </a>
    <button class="theme-toggle position-absolute" style="bottom: 20px; left: 20px;" onclick="toggleTheme()" title="Toggle theme">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </button>
</div>
{% endblock %}