{% extends "base.html" %}

{% block title %}Вход - DevOpsLab{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <div class="card-header">
            <i class="fas fa-cogs fa-3x mb-3"></i>
        </div>
        <div class="card-body">
            <form 
                hx-post="/api/v1/auth/login"
                hx-target="#login-result"
                hx-swap="innerHTML"
                class="login-form"
            >
                <div class="form-group">
                    <label class="form-label">Имя пользователя</label>
                    <input 
                        type="text" 
                        name="username"
                        class="form-control"
                        placeholder="admin"
                        required
                        autofocus
                    >
                </div>
                
                <div class="form-group">
                    <label class="form-label">Пароль</label>
                    <input 
                        type="password" 
                        name="password"
                        class="form-control"
                        placeholder="••••••••"
                        required
                    >
                </div>
                
                <div id="login-result" class="mt-3"></div>
                
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-sign-in-alt me-2"></i>
                    Войти
                </button>
            </form>
            
            <div class="mt-4 text-center">
                <p class="text-muted small">
                    По умолчанию: <strong>admin</strong> / <strong>admin</strong>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Проверяем, истекла ли сессия
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('expired') === '1') {
        const resultDiv = document.getElementById('login-result');
        resultDiv.innerHTML = '<div class="alert alert-warning mt-3"><i class="fas fa-exclamation-triangle me-2"></i>Ваша сессия истекла. Пожалуйста, войдите снова.</div>';
    }
    
    const form = document.querySelector('.login-form');
    
    form.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.xhr.status === 200) {
            const response = JSON.parse(event.detail.xhr.responseText);
            // Токен сохраняется в cookie автоматически сервером
            // Перенаправление на главную
            window.location.href = '/';
        } else {
            // Показываем ошибку
            const resultDiv = document.getElementById('login-result');
            resultDiv.innerHTML = '<div class="alert alert-danger mt-3">Неверное имя пользователя или пароль</div>';
        }
    });
});
</script>
{% endblock %}