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

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

{% block content %}
<div class="password-reset-container">
    <div class="password-reset-hero furry-card text-center mb-5">
        <div class="hero-content">
            <div class="hero-icon">🔐</div>
            <h1 class="hero-title">{% trans "Passwort zurücksetzen" %}</h1>
            <p class="hero-subtitle">{% trans "Keine Sorge! Wir helfen dir dabei, dein Passwort wiederherzustellen." %}</p>
        </div>
    </div>

    <div class="password-reset-form-container">
        <div class="form-card furry-card">
            <!-- Header -->
            <div class="form-header text-center mb-4">
                <div class="form-icon">📧</div>
                <h2 class="form-title">{% trans "E-Mail-Adresse eingeben" %}</h2>
                <p class="form-description">
                    {% trans "Gib deine E-Mail-Adresse ein und wir senden dir einen Link zum Zurücksetzen deines Passworts." %}
                </p>
            </div>

            <form method="post" class="password-reset-form" novalidate>
                {% csrf_token %}
                
                {% if form.errors %}
                <div class="error-message furry-card">
                    <div class="error-icon">⚠️</div>
                    <div class="error-content">
                        <h4 class="error-title">{% trans "Fehler aufgetreten" %}</h4>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <p class="error-text">{{ error }}</p>
                            {% endfor %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="{{ form.email.id_for_label }}" class="form-label">
                        📧 {% trans "E-Mail-Adresse" %}
                    </label>
                    <div class="input-wrapper">
                        {{ form.email }}
                        <div class="input-icon">📧</div>
                    </div>
                    {% if form.email.help_text %}
                    <div class="form-help">{{ form.email.help_text }}</div>
                    {% endif %}
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn furry-btn-primary">
                        <span class="btn-icon">🚀</span>
                        <span class="btn-text">{% trans "Link senden" %}</span>
                    </button>
                </div>
            </form>
            
            <div class="form-footer text-center">
                <p class="footer-text">
                    {% trans "Erinnerst du dich an dein Passwort?" %} 
                    <a href="{% url 'login' %}" class="footer-link">{% trans "Hier anmelden" %}</a>
                </p>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    --dark-color: #1F2937;
    --light-color: #F3E8FF;
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --error-color: #EF4444;
}

.password-reset-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.password-reset-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.hero-content {
    text-align: center;
}

.hero-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.password-reset-form-container {
    display: flex;
    justify-content: center;
}

.form-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
    width: 100%;
    max-width: 500px;
}

.form-header {
    margin-bottom: 2rem;
}

.form-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.form-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.form-description {
    color: var(--dark-color);
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
}

.error-message {
    background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
    border: 1px solid var(--error-color);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.error-icon {
    font-size: 1.5rem;
    min-width: 2rem;
}

.error-content {
    flex: 1;
}

.error-title {
    color: var(--error-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.error-text {
    color: var(--error-color);
    margin: 0;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 2rem;
}

.form-label {
    display: block;
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.input-wrapper {
    position: relative;
}

#id_email {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 15px;
    border: 2px solid var(--light-color);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

#id_email:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    outline: none;
    transform: translateY(-2px);
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--dark-color);
    opacity: 0.6;
}

.form-help {
    color: var(--dark-color);
    opacity: 0.7;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.form-actions {
    margin-bottom: 2rem;
}

.furry-btn-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
}

.furry-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-primary:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 1.2rem;
}

.btn-text {
    font-weight: 600;
}

.form-footer {
    border-top: 1px solid var(--light-color);
    padding-top: 1.5rem;
}

.footer-text {
    color: var(--dark-color);
    opacity: 0.8;
    margin: 0;
    font-size: 0.9rem;
}

.footer-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .password-reset-container {
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .form-card {
        padding: 2rem;
    }
    
    .hero-icon {
        font-size: 3rem;
    }
}

/* Animation für Form Elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Loading Animation für Button */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.furry-btn-primary.loading {
    pointer-events: none;
}

.furry-btn-primary.loading .btn-icon {
    animation: spin 1s linear infinite;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.password-reset-form');
    const submitBtn = document.querySelector('.furry-btn-primary');
    const emailInput = document.getElementById('id_email');
    
    // Form submission with loading state
    form.addEventListener('submit', function(e) {
        if (emailInput.value.trim() === '') {
            e.preventDefault();
            showError('Bitte gib deine E-Mail-Adresse ein.');
            return;
        }
        
        // Show loading state
        submitBtn.classList.add('loading');
        submitBtn.innerHTML = '<span class="btn-icon">🔄</span><span class="btn-text">Wird gesendet...</span>';
    });
    
    // Real-time validation
    emailInput.addEventListener('input', function() {
        const email = this.value.trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        if (email && !emailRegex.test(email)) {
            this.style.borderColor = 'var(--error-color)';
            showFieldError('Bitte gib eine gültige E-Mail-Adresse ein.');
        } else {
            this.style.borderColor = '';
            hideFieldError();
        }
    });
    
    // Focus effects
    emailInput.addEventListener('focus', function() {
        this.parentElement.style.transform = 'scale(1.02)';
    });
    
    emailInput.addEventListener('blur', function() {
        this.parentElement.style.transform = 'scale(1)';
    });
    
    function showError(message) {
        // Remove existing error messages
        const existingError = document.querySelector('.error-message');
        if (existingError) {
            existingError.remove();
        }
        
        // Create new error message
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message furry-card';
        errorDiv.innerHTML = `
            <div class="error-icon">⚠️</div>
            <div class="error-content">
                <h4 class="error-title">Fehler</h4>
                <p class="error-text">${message}</p>
            </div>
        `;
        
        form.insertBefore(errorDiv, form.firstChild);
        
        // Scroll to error
        errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    function showFieldError(message) {
        // Add error message below input
        const existingHelp = document.querySelector('.field-error');
        if (existingHelp) {
            existingHelp.remove();
        }
        
        const errorHelp = document.createElement('div');
        errorHelp.className = 'form-help field-error';
        errorHelp.style.color = 'var(--error-color)';
        errorHelp.textContent = message;
        
        emailInput.parentElement.appendChild(errorHelp);
    }
    
    function hideFieldError() {
        const fieldError = document.querySelector('.field-error');
        if (fieldError) {
            fieldError.remove();
        }
    }
});
</script>
{% endblock %}