{% extends 'portal_base.html' %}
{% load static i18n %}

{% block title %}{% trans "Portal Login" %} - ATS{% endblock %}

{% block customCSS %}
<style>
    /* KAAT-S UI Variables */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --kaauh-success: #28a745;
        --kaauh-info: #17a2b8;
        --kaauh-danger: #dc3545;
        --kaauh-warning: #ffc107;
    }

    body {
        background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
        min-height: 100vh;
    }

    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 0;
    }

    .login-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border: none;
        max-width: 500px;
        width: 100%;
        margin: 0 1rem;
    }

    .login-header {
        background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
        color: white;
        padding: 2rem;
        border-radius: 1rem 1rem 0 0;
        text-align: center;
    }

    .login-body {
        padding: 2.5rem;
    }

    .form-control:focus {
        border-color: var(--kaauh-teal);
        box-shadow: 0 0 0 0.2rem rgba(0, 99, 110, 0.25);
    }

    .btn-login {
        background: linear-gradient(135deg, var(--kaauh-teal) 0%, var(--kaauh-teal-dark) 100%);
        border: none;
        color: white;
        font-weight: 600;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 99, 110, 0.3);
    }

    .input-group-text {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
    }

    .user-type-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .user-type-card {
        border: 2px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .user-type-card:hover {
        border-color: var(--kaauh-teal);
        background-color: #f8f9fa;
    }

    .user-type-card.selected {
        border-color: var(--kaauh-teal);
        background-color: rgba(0, 99, 110, 0.1);
    }

    .user-type-icon {
        font-size: 2rem;
        color: var(--kaauh-teal);
        margin-bottom: 0.5rem;
    }

    .alert {
        border-radius: 0.5rem;
        border: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <!-- Login Header -->
        <div class="login-header">
            <div class="mb-3">
                <i class="fas fa-users fa-3x"></i>
            </div>
            <h3 class="mb-2">{% trans "Portal Login" %}</h3>
            <p class="mb-0 opacity-75">
                {% trans "Access your personalized dashboard" %}
            </p>
        </div>

        <!-- Login Body -->
        <div class="login-body">
            <!-- Login Form -->
            <form method="post" novalidate>
                {% csrf_token %}


                <!-- Email Field -->
                <div class="mb-3">
                    <label for="{{ form.email.id_for_label }}" class="form-label fw-bold">
                        <i class="fas fa-envelope me-2"></i>
                        {% trans "Email Address" %}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-envelope"></i>
                        </span>
                        {{ form.email }}
                    </div>
                    {% if form.email.errors %}
                        <div class="text-danger small mt-1">
                            {% for error in form.email.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Password Field -->
                <div class="mb-4">
                    <label for="{{ form.password.id_for_label }}" class="form-label fw-bold">
                        <i class="fas fa-lock me-2"></i>
                        {% trans "Password" %}
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-key"></i>
                        </span>
                        {{ form.password }}
                    </div>
                    {% if form.password.errors %}
                        <div class="text-danger small mt-1">
                            {% for error in form.password.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                 <!-- User Type Selection -->
                <div class="mb-4">
                    <label for="{{ form.user_type.id_for_label }}" class="form-label fw-bold">
                        <i class="fas fa-user-tag me-2"></i>
                        {% trans "Select User Type" %}
                    </label>
                    {{ form.user_type }}
                    {% if form.user_type.errors %}
                        <div class="text-danger small mt-1">
                            {% for error in form.user_type.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>


                <!-- Submit Button -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-login btn-lg">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        {% trans "Login" %}
                    </button>
                </div>
            </form>

            <!-- Help Links -->
            <div class="text-center mt-4">
                <small class="text-muted">
                    {% trans "Need help?" %}
                    <a href="#" class="text-decoration-none">
                        {% trans "Contact Support" %}
                    </a>
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Focus on user type field
    const userTypeField = document.getElementById('{{ form.user_type.id_for_label }}');
    if (userTypeField) {
        userTypeField.focus();
    }

    // Form validation
    const form = document.querySelector('form');
    const emailField = document.getElementById('{{ form.email.id_for_label }}');
    const passwordField = document.getElementById('{{ form.password.id_for_label }}');

    if (form) {
        form.addEventListener('submit', function(e) {
            const userType = userTypeField.value;
            const email = emailField.value.trim();
            const password = passwordField.value.trim();

            if (!userType) {
                e.preventDefault();
                showError('{% trans "Please select a user type." %}');
                userTypeField.focus();
                return;
            }

            if (!email) {
                e.preventDefault();
                showError('{% trans "Please enter your email address." %}');
                emailField.focus();
                return;
            }

            if (!password) {
                e.preventDefault();
                showError('{% trans "Please enter your password." %}');
                passwordField.focus();
                return;
            }

            // Basic email validation
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                e.preventDefault();
                showError('{% trans "Please enter a valid email address." %}');
                emailField.focus();
                return;
            }
        });
    }

    function showError(message) {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.alert-danger');
        existingAlerts.forEach(alert => alert.remove());

        // Create new alert
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        // Insert at the top of login body
        const loginBody = document.querySelector('.login-body');
        loginBody.insertBefore(alertDiv, loginBody.firstChild);

        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
});
</script>
{% endblock %}