{% extends "base.html" %}

{% block title %}Login - Delphi Database{% endblock %}

{% block navbar %}{% endblock %}

{% block body_class %}login-page{% endblock %}

{% block content %}
<div class="container auth-wrapper">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-5">
            <div class="card shadow-lg" style="border: none; border-radius: 15px;">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <div class="auth-logo mx-auto mb-4">
                            <img src="{{ url_for('static', path='/logo/delphi-logo.webp') }}" alt="Delphi Logo">
                        </div>
                        <h2 class="card-title mb-2">Welcome Back</h2>
                        <p class="text-muted">Sign in to access Delphi Database</p>
                    </div>

                    {% if error %}
                    <div class="alert alert-danger d-flex align-items-center" role="alert" style="border-radius: 8px;">
                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
                        <div>{{ error }}</div>
                    </div>
                    {% endif %}

                    <form method="post" action="/login">
                        <div class="mb-4">
                            <label for="username" class="form-label fw-semibold">Username</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="bi bi-person text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0 bg-light"
                                       id="username" name="username" required
                                       placeholder="Enter your username" autocomplete="username"
                                       style="border-left: none;">
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label fw-semibold">Password</label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="bi bi-key text-muted"></i>
                                </span>
                                <input type="password" class="form-control border-start-0 bg-light"
                                       id="password" name="password" required
                                       placeholder="Enter your password" autocomplete="current-password"
                                       style="border-left: none;">
                            </div>
                        </div>

                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="rememberMe">
                            <label class="form-check-label text-muted" for="rememberMe">
                                Remember me
                            </label>
                        </div>

                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-primary btn-lg fw-semibold">
                                <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-4 p-3" style="background-color: #f8f9fa; border-radius: 8px;">
                        <small class="text-muted">
                            <i class="bi bi-info-circle me-1"></i>
                            <strong>Default credentials:</strong> admin / admin123
                        </small>
                    </div>
                </div>
            </div>

            <div class="text-center mt-4">
                <small class="text-muted">
                    Don't have an account? <a href="mailto:admin@delphi.com" class="text-decoration-none">Contact your administrator</a>.
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Auto-focus on username field
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('username').focus();
});

// Show/hide password toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    const passwordField = document.getElementById('password');
    const toggleBtn = document.createElement('button');
    toggleBtn.type = 'button';
    toggleBtn.className = 'btn btn-light border-start-0';
    toggleBtn.innerHTML = '<i class="bi bi-eye text-muted"></i>';
    toggleBtn.style.border = '2px solid #e9ecef';
    toggleBtn.style.borderLeft = 'none';
    toggleBtn.style.background = '#f8f9fa';
    toggleBtn.style.borderRadius = '0 8px 8px 0';

    // Add toggle functionality with better UX
    toggleBtn.addEventListener('click', function() {
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            this.innerHTML = '<i class="bi bi-eye-slash text-muted"></i>';
            this.classList.remove('btn-light');
            this.classList.add('btn-outline-primary');
        } else {
            passwordField.type = 'password';
            this.innerHTML = '<i class="bi bi-eye text-muted"></i>';
            this.classList.remove('btn-outline-primary');
            this.classList.add('btn-light');
        }
    });

    // Insert toggle button into password input group
    const passwordInputGroup = passwordField.closest('.input-group');
    if (passwordInputGroup) {
        passwordInputGroup.appendChild(toggleBtn);

        // Adjust the input field border radius
        passwordField.style.borderRadius = '8px 0 0 8px';
        passwordField.style.borderRight = 'none';
    }
});
</script>
{% endblock %}