{% extends "base.html" %}

{% block title %}{{ t.login }} - {{ t.app_title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card shadow">
            <div class="card-body">
                <div class="text-center mb-4">
                    <img src="{{ url_for('static', filename='images/SIDEL.png') }}" 
                         alt="SIDEL Logo" 
                         class="sidel-logo mb-3">
                    <h1 class="h3 mb-3 fw-normal">{{ t.app_title }}</h1>
                    <p class="text-muted">Multi-Language Script Manager</p>
                </div>
                
                <form method="POST" action="{{ url_for('login') }}">
                    <div class="mb-3">
                        <label for="username" class="form-label">{{ t.username }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                            <input type="text" class="form-control" id="username" name="username" required autocomplete="username">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">{{ t.password }}</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-lock"></i></span>
                            <input type="password" class="form-control" id="password" name="password" required autocomplete="current-password">
                        </div>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-box-arrow-in-right"></i> {{ t.login }}
                        </button>
                    </div>
                </form>
                
                <hr class="my-4">
                
                <!-- Language Selector for Login Page -->
                <div class="text-center">
                    <div class="btn-group" role="group" aria-label="Language selection">
                        <button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="en">EN</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="es">ES</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="it">IT</button>
                        <button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="fr">FR</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Demo Users Info (Remove in Production) -->
        <div class="card mt-3">
            <div class="card-body">
                <h6 class="card-title">Demo Users</h6>
                <small class="text-muted">
                    <strong>admin/admin123</strong> - Administrator<br>
                    <strong>dev/dev123</strong> - Developer<br>
                    <strong>op/op123</strong> - Operator<br>
                    <strong>view/view123</strong> - Viewer
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Auto-focus username field
    document.getElementById('username').focus();
    
    // Language selection for login page
    document.querySelectorAll('.language-option').forEach(button => {
        button.addEventListener('click', function() {
            const lang = this.dataset.lang;
            // Update URL with language parameter and reload
            const url = new URL(window.location);
            url.searchParams.set('lang', lang);
            window.location.href = url.toString();
        });
    });
</script>
{% endblock %}