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

{% block title %}{% trans "Password Reset Complete" %} - 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 erfolgreich geändert!" %}</h1>
            <p class="hero-subtitle">{% trans "Dein neues Passwort wurde gespeichert und du kannst dich jetzt anmelden." %}</p>
        </div>
    </div>

    <div class="password-reset-form-container">
        <div class="form-card furry-card text-center">
            <!-- Success Animation -->
            <div class="success-animation">
                <div class="success-icon">✅</div>
                <div class="success-particles">
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                    <div class="particle"></div>
                </div>
            </div>

            <div class="success-content">
                <h2 class="success-title">{% trans "Alles erledigt!" %}</h2>
                <p class="success-description">
                    {% trans "Dein Passwort wurde erfolgreich geändert. Du kannst dich jetzt mit deinem neuen Passwort anmelden." %}
                </p>
                
                <div class="security-tips">
                    <h3 class="tips-title">🔒 Sicherheitstipps:</h3>
                    <ul class="tips-list">
                        <li>Teile dein Passwort niemals mit anderen</li>
                        <li>Verwende ein einzigartiges Passwort für jedes Konto</li>
                        <li>Ändere dein Passwort regelmäßig</li>
                        <li>Aktiviere die Zwei-Faktor-Authentifizierung</li>
                    </ul>
                </div>

                <div class="success-actions">
                    <a href="{% url 'login' %}" class="btn furry-btn-primary">
                        <span class="btn-icon">🚀</span>
                        <span class="btn-text">{% trans "Jetzt anmelden" %}</span>
                    </a>
                    <a href="{% url 'products:product_list' %}" class="btn furry-btn-secondary">
                        <span class="btn-icon">🛍️</span>
                        <span class="btn-text">{% trans "Shop durchsuchen" %}</span>
                    </a>
                </div>
            </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: 3rem 2.5rem;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
    width: 100%;
    max-width: 500px;
}

.success-animation {
    position: relative;
    margin-bottom: 2rem;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    animation: bounce 1s ease-out;
}

@keyframes bounce {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    animation: particle 2s ease-out infinite;
}

.particle:nth-child(1) {
    top: 0;
    left: 50%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    top: 25%;
    right: 0;
    animation-delay: 0.2s;
}

.particle:nth-child(3) {
    bottom: 25%;
    right: 0;
    animation-delay: 0.4s;
}

.particle:nth-child(4) {
    bottom: 0;
    left: 50%;
    animation-delay: 0.6s;
}

.particle:nth-child(5) {
    top: 25%;
    left: 0;
    animation-delay: 0.8s;
}

@keyframes particle {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(-20px);
        opacity: 0;
    }
}

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

.success-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.success-description {
    color: var(--dark-color);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.security-tips {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border: 1px solid var(--warning-color);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.tips-title {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    color: var(--dark-color);
    opacity: 0.8;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.tips-list li::before {
    content: '🔒';
    position: absolute;
    left: 0;
    font-size: 0.9rem;
}

.success-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.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;
    text-decoration: none;
    width: 100%;
    max-width: 250px;
}

.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);
}

.furry-btn-secondary {
    background: var(--secondary-color);
    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;
    text-decoration: none;
    width: 100%;
    max-width: 250px;
}

.furry-btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
    color: white;
    text-decoration: none;
}

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

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

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

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

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

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

.success-content {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.security-tips {
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

.success-actions {
    animation: fadeInUp 0.8s ease-out 0.8s both;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add some interactive effects
    const successIcon = document.querySelector('.success-icon');
    const tipsList = document.querySelectorAll('.tips-list li');
    const buttons = document.querySelectorAll('.furry-btn-primary, .furry-btn-secondary');
    
    // Animate tips list items
    tipsList.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        
        setTimeout(() => {
            item.style.transition = 'all 0.5s ease';
            item.style.opacity = '1';
            item.style.transform = 'translateX(0)';
        }, 1000 + (index * 200));
    });
    
    // Add click effect to success icon
    successIcon.addEventListener('click', function() {
        this.style.transform = 'scale(1.1) rotate(10deg)';
        setTimeout(() => {
            this.style.transform = 'scale(1) rotate(0deg)';
        }, 300);
    });
    
    // Add hover effects to buttons
    buttons.forEach(button => {
        button.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px) scale(1.02)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Add confetti effect on page load
    setTimeout(() => {
        createConfetti();
    }, 500);
    
    function createConfetti() {
        const colors = ['#8B5CF6', '#EC4899', '#F59E0B', '#10B981'];
        
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.style.position = 'fixed';
            confetti.style.width = '10px';
            confetti.style.height = '10px';
            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.left = Math.random() * window.innerWidth + 'px';
            confetti.style.top = '-10px';
            confetti.style.borderRadius = '50%';
            confetti.style.pointerEvents = 'none';
            confetti.style.zIndex = '1000';
            
            document.body.appendChild(confetti);
            
            const animation = confetti.animate([
                { transform: 'translateY(0px) rotate(0deg)', opacity: 1 },
                { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
            ], {
                duration: 3000 + Math.random() * 2000,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
            });
            
            animation.onfinish = () => {
                confetti.remove();
            };
        }
    }
});
</script>
{% endblock %}