{% extends "layout.html" %}
{% block title %}{{ _('Login') }}{% endblock %}
{% block content %}
<div class="container d-flex flex-column justify-content-center align-items-center" style="min-height: 80vh;">
    
    <div class="text-center mb-4">
        {% if g.settings.logo_url %}
        <img src="{{ g.settings.logo_url }}" alt="Logo" style="max-height: 80px; margin-bottom: 15px;">
        {% else %}
        <img src="{{ url_for('static', filename='limristem-web.png') }}" alt="Limristem Logo" style="height: 60px;" class="mb-3">
        <h1 class="fw-bold text-primary display-5 mb-0">{{ g.settings.app_name or 'Limristem Web' }}</h1>
        {% endif %}
    </div>

    <div class="card shadow-lg border-0" style="width: 100%; max-width: 400px; border-radius: 16px;">
        <div class="card-body p-5">
            {% if g.settings.custom_message %}
            <div class="alert alert-info text-center small mb-4">
                {{ g.settings.custom_message }}
            </div>
            {% endif %}
            {% if error %}
            <div class="alert alert-danger d-flex align-items-center mb-4 border-0 bg-danger bg-opacity-10 text-danger" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                <div>
                    <strong>Access Denied</strong><br>
                    {{ error }}
                    {% if remaining is defined %}
                    <div class="mt-1 small">Attempts remaining: {{ remaining }}</div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <form method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                
                {% if require_totp %}
                <input type="hidden" name="username" value="{{ username }}">
                <input type="hidden" name="password" value="{{ password }}">
                <div class="mb-4 text-center">
                    <div class="mb-3"><i class="fas fa-shield-alt fa-3x text-primary"></i></div>
                    <h5 class="fw-bold">Two-Factor Auth</h5>
                    <p class="text-muted small">Enter the 6-digit code from your authenticator app.</p>
                </div>
                <div class="mb-4">
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-key text-muted"></i></span>
                        <input type="text" name="totp_code" class="form-control bg-light border-start-0 ps-0 text-center font-monospace fs-5" placeholder="123456" required autocomplete="off" autofocus>
                    </div>
                </div>
                {% else %}
                <div class="mb-3">
                    <label class="form-label text-muted small fw-bold">Username</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
                        <input type="text" name="username" class="form-control bg-light border-start-0 ps-0" placeholder="Enter username" required>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="form-label text-muted small fw-bold">Password</label>
                    <div class="input-group">
                         <span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
                        <input type="password" name="password" class="form-control bg-light border-start-0 ps-0" placeholder="••••••••" required>
                    </div>
                </div>
                {% endif %}
                
                <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm">Sign In</button>
            </form>
        </div>
    </div>
    
    <div class="mt-4 text-center">
        <small class="text-muted">Powered by <a href="https://limristem.eu/prodotti?id=web" target="_blank" class="text-decoration-none fw-bold text-primary">Limristem Web</a></small>
    </div>

</div>

<style>
    /* Hide Sidebar/Topbar for Login Page via CSS if logical check in layout is hard, 
       but better to modify layout or create separate base. 
       For "Mini" simplicity, we'll hide elements if user not logged in via jinja logic in layout 
       OR just CSS override here if the block structure allows. 
       Actually, the layout.html has the sidebar hardcoded. 
       We should ideally have a base layout and an authenticated layout.
       
       Quick fix: CSS override to hide sidebar and reset margins for this page.
    */
    .sidebar, .topbar { display: none !important; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
    footer { display: none !important; } /* We added custom footer above */
    body { background-color: #f9fafb; }
</style>
{% endblock %}