{% extends 'base.html' %}
{% load static %}

{% block title %}Registrieren - {{ block.super }}{% 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">🐾 Registrieren</h1>
                    <p class="text-muted">Werde Teil der Furry-Community!</p>
                </div>
                
                <form method="post" class="needs-validation furry-form" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    {% for field in form %}
                    <div class="form-group mb-3">
                        <label for="{{ field.id_for_label }}" class="form-label">
                            {{ field.label }}
                        </label>
                        {{ field }}
                        {% if field.help_text %}
                        <div class="form-text">{{ field.help_text }}</div>
                        {% endif %}
                        {% if field.errors %}
                        <div class="invalid-feedback d-block">
                            {% for error in field.errors %}
                            {{ error }}
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary furry-btn">
                            🐾 Registrieren
                        </button>
                    </div>
                </form>
                
                <div class="text-center mt-4">
                    <p>Bereits ein Konto? <a href="{% url 'login' %}">Jetzt anmelden</a></p>
                    <p><a href="{% url 'password_reset' %}">Passwort vergessen?</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);
    margin: 2rem 0;
}

.furry-form input, .furry-form textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 2px solid var(--light-color);
    transition: all 0.3s ease;
    font-size: 1rem;
}

.furry-form input:focus, .furry-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
    outline: none;
}

.furry-form input.invalid, .furry-form textarea.invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

.furry-form input.valid, .furry-form textarea.valid {
    border-color: #10B981;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

.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;
    font-weight: 700;
    font-size: 1.1rem;
}

.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;
    font-weight: 600;
}

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

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

.alert-danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border: 2px solid #EF4444;
    border-radius: 10px;
    color: #991B1B;
    padding: 1rem;
    margin-bottom: 1rem;
}

.invalid-feedback {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Animation für erfolgreiche Registrierung */
@keyframes success-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.success-animation {
    animation: success-bounce 1s ease-in-out;
}
</style>

{% block extra_js %}
<script>
    // Formular-Validierung
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('.furry-form');
        const inputs = form.querySelectorAll('input, textarea');
        
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                validateField(this);
            });
            
            input.addEventListener('input', function() {
                if (this.classList.contains('invalid')) {
                    validateField(this);
                }
            });
        });
        
        function validateField(field) {
            if (field.checkValidity()) {
                field.classList.remove('invalid');
                field.classList.add('valid');
            } else {
                field.classList.remove('valid');
                field.classList.add('invalid');
            }
        }
        
        // Erfolgreiche Registrierung Animation
        // {% if form.is_valid and not form.errors %}
        // document.querySelector('.furry-card').classList.add('success-animation');
        // {% endif %}
    });
    
    // Formular neu laden, wenn der Benutzer zurück navigiert
    window.addEventListener('pageshow', function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    });
</script>
{% endblock %}
{% endblock %}