{% extends "base.html" %}

{% block title %}Login - Mimir{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6 col-lg-4">
        <div class="card shadow">
            <div class="card-body">
                <h2 class="card-title text-center mb-4">
                    <i class="fas fa-sign-in-alt"></i> Login
                </h2>

                {% if resend_success %}
                <div class="text-success small mb-3" data-testid="login-resend-success">
                    <i class="fas fa-circle-check me-1"></i>
                    A new verification email has been sent.
                </div>
                {% endif %}

                {% if show_resend %}
                <div class="alert alert-warning d-flex gap-2 align-items-start mb-3"
                     role="alert" data-testid="login-unverified-banner">
                    <i class="fas fa-triangle-exclamation mt-1 flex-shrink-0"></i>
                    <div>
                        <strong>Please verify your email address before logging in.</strong>
                        <br>Check your inbox for a verification link.
                        <form method="post" action="{% url 'resend_verification' %}" class="mt-2 mb-0">
                            {% csrf_token %}
                            <input type="hidden" name="email" value="{{ resend_email }}">
                            <button type="submit" class="btn btn-sm btn-warning"
                                    data-testid="login-resend-btn">
                                <i class="fas fa-paper-plane me-1"></i>Re-send verification email
                            </button>
                        </form>
                    </div>
                </div>
                {% endif %}
                
                {% if errors.non_field_errors %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert" data-testid="login-error-message">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    <strong>Login failed:</strong> {{ errors.non_field_errors.0 }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                {% endif %}
                
                <form method="post" data-testid="login-form">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="id_username" class="form-label">Username</label>
                        <input 
                            type="text" 
                            name="username" 
                            id="id_username"
                            class="form-control {% if errors.username %}is-invalid{% endif %}"
                            data-testid="login-username-input"
                            value="{{ username }}"
                            required
                            autofocus>
                        {% if errors.username %}
                        <div class="invalid-feedback d-block" data-testid="username-field-error">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            {{ errors.username.0 }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        <label for="id_password" class="form-label">Password</label>
                        <input 
                            type="password" 
                            name="password" 
                            id="id_password"
                            class="form-control {% if errors.password %}is-invalid{% endif %}"
                            data-testid="login-password-input"
                            required>
                        {% if errors.password %}
                        <div class="invalid-feedback d-block" data-testid="password-field-error">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            {{ errors.password.0 }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input 
                            type="checkbox" 
                            name="remember_me" 
                            id="id_remember_me"
                            class="form-check-input"
                            data-testid="login-remember-checkbox">
                        <label class="form-check-label" for="id_remember_me">
                            Remember me for 30 days
                        </label>
                    </div>
                    
                    <button 
                        type="submit" 
                        class="btn btn-primary w-100"
                        data-testid="login-submit-button"
                        data-bs-toggle="tooltip" data-bs-placement="top"
                        title="Sign in">
                        <i class="fas fa-sign-in-alt"></i> Login
                    </button>
                    
                    <div class="text-center mt-3">
                        <a href="{% url 'password_reset' %}" class="text-muted text-decoration-none small">
                            <i class="fa-solid fa-key"></i> Forgot password?
                        </a>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="text-center mt-3">
            <a href="{% url 'register' %}" class="btn btn-success w-100" data-testid="login-signup-button">
                <i class="fa-solid fa-user-plus me-1"></i> Sign Up
            </a>
        </div>
    </div>
</div>
{% endblock %}