{% extends "auth_base.html" %}
{% load static %}

{% block title %}Login - Stream Processor{% endblock %}

{% block extra_head %}
<style>
    .login-btn {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        background: linear-gradient(45deg, var(--primary-600), var(--primary-700));
        border: none;
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }
    
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
        background: linear-gradient(45deg, var(--primary-700), var(--primary-800));
    }
    
    .login-btn:active {
        transform: translateY(0);
    }
    
    .login-btn.loading {
        pointer-events: none;
    }
    
    .login-btn .btn-text {
        transition: opacity 0.3s ease;
    }
    
    .login-btn.loading .btn-text {
        opacity: 0;
    }
    
    .login-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .login-btn.loading .login-spinner {
        opacity: 1;
    }
    
    .form-control {
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    
    .form-control:hover {
        border-color: var(--primary-300);
    }
    
    .fade-in {
        animation: fadeIn 0.6s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .pulse {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
</style>
{% endblock %}

{% block content %}
<!-- Login Form -->
<div class="fade-in">
    <form method="post" id="loginForm">
        {% csrf_token %}
            
    <!-- Username Field -->
    <div class="mb-3">
        <label for="{{ form.username.id_for_label }}" class="form-label text-dark fw-medium">
            <i class="fas fa-user me-2 text-primary"></i>Username
        </label>
        <input type="text" 
               name="{{ form.username.name }}" 
               id="{{ form.username.id_for_label }}"
               class="form-control{% if form.username.errors %} is-invalid{% endif %}"
               value="{{ form.username.value|default:'' }}"
               required
               autocomplete="username"
               placeholder="Enter your username">
        {% if form.username.errors %}
            <div class="invalid-feedback">
                {% for error in form.username.errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}
    </div>
    
    <!-- Password Field -->
    <div class="mb-3">
        <label for="{{ form.password.id_for_label }}" class="form-label text-dark fw-medium">
            <i class="fas fa-lock me-2 text-primary"></i>Password
        </label>
        <input type="password" 
               name="{{ form.password.name }}" 
               id="{{ form.password.id_for_label }}"
               class="form-control{% if form.password.errors %} is-invalid{% endif %}"
               required
               autocomplete="current-password"
               placeholder="Enter your password">
        {% if form.password.errors %}
            <div class="invalid-feedback">
                {% for error in form.password.errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}
    </div>
    
    <!-- Remember Me -->
    {% if form.remember_me %}
    <div class="form-check mb-4">
        <input type="checkbox" 
               name="{{ form.remember_me.name }}" 
               id="{{ form.remember_me.id_for_label }}"
               class="form-check-input"
               {% if form.remember_me.value %}checked{% endif %}>
        <label for="{{ form.remember_me.id_for_label }}" class="form-check-label text-muted">
            Remember me
        </label>
    </div>
    {% endif %}
    
        <!-- Submit Button -->
        <button type="submit" class="btn login-btn w-100 py-3 fw-medium text-white">
            <span class="btn-text">
                <i class="fas fa-sign-in-alt me-2"></i>
                Sign In
            </span>
            <div class="login-spinner">
                <i class="fas fa-spinner fa-spin"></i>
            </div>
        </button>
        
        <!-- Forgot Password Link -->
        <div class="text-center mt-4">
            <a href="#" class="text-muted text-decoration-none small hover-primary">
                <i class="fas fa-question-circle me-1"></i>
                Forgot your password?
            </a>
        </div>
    </form>
</div>

<!-- Include Login Manager JavaScript -->
<script src="{% static 'js/login-manager.js' %}"></script>

<!-- Handle Django Messages with SweetAlert -->
{% if messages %}
    {% for message in messages %}
        {% if message.tags == 'error' %}
            <script>
            setTimeout(function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ message|escapejs }}',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#2563eb',
                    background: '#ffffff',
                    color: '#1f2937',
                    iconColor: '#ef4444'
                });
            }, 100);
            </script>
        {% elif message.tags == 'success' %}
            <script>
            setTimeout(function() {
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: '{{ message|escapejs }}',
                    timer: 2000,
                    timerProgressBar: true,
                    showConfirmButton: false,
                    background: '#ffffff',
                    color: '#1f2937',
                    iconColor: '#10b981'
                });
            }, 100);
            </script>
        {% else %}
            <script>
            setTimeout(function() {
                Swal.fire({
                    icon: 'info',
                    title: 'Notice',
                    text: '{{ message|escapejs }}',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#2563eb',
                    background: '#ffffff',
                    color: '#1f2937',
                    iconColor: '#3b82f6'
                });
            }, 100);
            </script>
        {% endif %}
    {% endfor %}
{% endif %}

{% if form.non_field_errors %}
    {% for error in form.non_field_errors %}
        <script>
        setTimeout(function() {
            Swal.fire({
                icon: 'error',
                title: 'Login Error',
                text: '{{ error|escapejs }}',
                confirmButtonText: 'Try Again',
                confirmButtonColor: '#2563eb',
                background: '#ffffff',
                color: '#1f2937',
                iconColor: '#ef4444'
            });
        }, 100);
        </script>
    {% endfor %}
{% endif %}
{% endblock %}