{% extends "shop/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Login" %} - Kasico Art & Design{% endblock %}

{% block content %}
<div class="content-container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="furry-card">
                <!-- Header -->
                <div class="text-center mb-4">
                    <img src="{% static 'images/kasicoLogo.png' %}" 
                         alt="Kasico Art & Design Logo" 
                         class="img-fluid mb-4"
                         style="max-width: 150px; height: auto;">
                    <h1 class="h3 mb-3">🐾 {% trans "Login" %}</h1>
                    <p class="text-muted">Willkommen zurück in der Furry-Community!</p>
                </div>
                
                <form method="post" class="needs-validation" novalidate>
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ next }}">
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <label for="{{ form.username.id_for_label }}" class="form-label">
                            {{ form.username.label }}
                        </label>
                        {{ form.username }}
                        {% if form.username.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.username.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-4">
                        <label for="{{ form.password.id_for_label }}" class="form-label">
                            {{ form.password.label }}
                        </label>
                        {{ form.password }}
                        {% if form.password.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.password.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary furry-btn">
                            🐾 {% trans "Login" %}
                        </button>
                    </div>
                </form>
                
                <div class="mt-3 text-center">
                    <p>{% trans "Don't have an account?" %} 
                        <a href="{% url 'register' %}">{% trans "Register here" %}</a>
                    </p>
                    <p><a href="{% url 'password_reset' %}">{% trans "Forgot your password?" %}</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;      /* Helles Lila */
    --secondary-color: #EC4899;    /* Pink */
    --accent-color: #F59E0B;       /* Orange */
    --dark-color: #1F2937;         /* Dunkelgrau */
    --light-color: #F3E8FF;        /* Helles Lila */
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
}

.furry-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

#id_username, #id_password {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 2px solid var(--light-color);
    transition: all 0.3s ease;
}

#id_username:focus, #id_password:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
    outline: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

.form-text {
    font-size: 0.875rem;
    color: var(--dark-color);
    opacity: 0.7;
    margin-top: 0.25rem;
}
</style>

{% block extra_js %}
<script>
    // Formular neu laden, wenn der Benutzer zurück navigiert
    window.addEventListener('pageshow', function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    });
</script>
{% endblock %}
{% endblock %}