{% extends "base.html" %}

{% block title %}Login - Aliex POS{% endblock %}

{% block extra_css %}
<style>
    body {
        background: linear-gradient(135deg, #0A1628 0%, #1A2A4A 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    .auth-page {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 2rem;
        width: 100%;
    }
    .login-card {
        max-width: 420px;
        width: 100%;
        border: none;
        border-radius: 1rem;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .login-logo {
        max-width: 100px;
        height: auto;
    }
    .login-title {
        font-size: 2rem;
        font-weight: 800;
        color: #0A1628;
    }
    .login-title span {
        color: #4A90D9;
    }
    .form-control:focus {
        border-color: #4A90D9;
        box-shadow: 0 0 0 0.2rem rgba(74, 144, 217, 0.25);
    }
    .btn-login {
        background: #4A90D9;
        color: white;
        font-weight: 600;
        padding: 0.75rem;
        transition: all 0.3s;
    }
    .btn-login:hover {
        background: #3A70B9;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(74, 144, 217, 0.4);
    }
    .powered-by {
        font-size: 0.7rem;
        color: #adb5bd;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="card login-card">
        <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
                <img src="{{ url_for('static', filename='img/logo.png') }}" 
                     alt="Aliex POS" 
                     class="login-logo mb-3"
                     onerror="this.style.display='none'">
                <h1 class="login-title">Aliex<span>POS</span></h1>
                <p class="text-muted small text-uppercase">Point of Sale System</p>
            </div>
            
            <form method="POST" action="{{ url_for('auth.login') }}">
                <div class="mb-3">
                    <label for="username" class="form-label fw-semibold">Username or Email</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fas fa-user text-muted"></i>
                        </span>
                        <input type="text" id="username" name="username" 
                               class="form-control border-start-0 ps-0" 
                               placeholder="Enter username or email" required autofocus>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="password" class="form-label fw-semibold">Password</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fas fa-lock text-muted"></i>
                        </span>
                        <input type="password" id="password" name="password" 
                               class="form-control border-start-0 ps-0" 
                               placeholder="Enter password" required>
                    </div>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="form-check">
                        <input type="checkbox" id="remember" name="remember" class="form-check-input">
                        <label for="remember" class="form-check-label small">Remember me</label>
                    </div>
                    <a href="#" class="small text-decoration-none">Forgot password?</a>
                </div>
                
                <button type="submit" class="btn btn-login w-100">
                    <i class="fas fa-sign-in-alt me-2"></i> Login
                </button>
            </form>
            
            <div class="text-center mt-4 pt-3 border-top">
                <p class="small text-muted mb-1">&copy; 2026 Aliex POS. All rights reserved.</p>
                <p class="powered-by mb-0">Powered by Zenithora Inc. Solutions | +263 788 595 666</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}