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

{% block title %}Set New Password - Bloggers of Zambia{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="text-center mb-4">
                <img src="{% static 'img/bloggers_of_zed_logo.png' %}" alt="Bloggers of Zambia Logo" 
                     class="img-fluid mb-4" style="max-height: 100px;">
            </div>
            
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h4 mb-4 text-center">Set New Password</h2>
                    
                    {% if validlink %}
                        <form method="post" id="passwordResetForm">
                            {% csrf_token %}
                            <div class="mb-4">
                                <label for="{{ form.new_password1.id_for_label }}" class="form-label">New Password</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                    <input type="password" name="new_password1" class="form-control" id="{{ form.new_password1.id_for_label }}" required>
                                </div>
                                {% if form.new_password1.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.new_password1.errors }}
                                </div>
                                {% endif %}
                                <ul class="form-text small mt-2">
                                    <li>Your password can't be too similar to your other personal information.</li>
                                    <li>Your password must contain at least 8 characters.</li>
                                    <li>Your password can't be a commonly used password.</li>
                                    <li>Your password can't be entirely numeric.</li>
                                </ul>
                            </div>
    
                            <div class="mb-4">
                                <label for="{{ form.new_password2.id_for_label }}" class="form-label">Confirm Password</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                                    <input type="password" name="new_password2" class="form-control" id="{{ form.new_password2.id_for_label }}" required>
                                </div>
                                {% if form.new_password2.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.new_password2.errors }}
                                </div>
                                {% endif %}
                            </div>
    
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary" id="resetBtn">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" id="resetSpinner" style="display: none;"></span>
                                    <span id="resetBtnText">Change Password</span>
                                </button>
                            </div>
                            
                            <div class="mt-3 text-center">
                                <a href="{% url 'events:index' %}" class="text-decoration-none">
                                    <i class="bi bi-house me-1"></i> Back to Home
                                </a>
                            </div>
                        </form>
                        {% else %}
                            <div class="alert alert-danger mb-4">
                                <p class="mb-0"><i class="bi bi-exclamation-triangle-fill me-2"></i>The password reset link was invalid, possibly because it has already been used.</p>
                            </div>
                            <div class="text-center">
                                <p class="mb-4">Please request a new password reset.</p>
                                <a href="{% url 'password_reset' %}" class="btn btn-primary">
                                    <i class="bi bi-key me-2"></i>Request New Reset Link
                                </a>
                                <div class="mt-4">
                                    <a href="{% url 'events:index' %}" class="text-decoration-none">
                                        <i class="bi bi-house me-1"></i> Back to Home
                                    </a>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('passwordResetForm');
        const resetBtn = document.getElementById('resetBtn');
        const resetSpinner = document.getElementById('resetSpinner');
        const resetBtnText = document.getElementById('resetBtnText');
        
        if (form && resetBtn && resetSpinner && resetBtnText) {
            form.addEventListener('submit', function(e) {
                // Show the spinner
                resetSpinner.style.display = 'inline-block';
                resetBtnText.textContent = 'Processing...';
                resetBtn.disabled = true;
                
                // Allow the form to submit
                return true;
            });
        }
    });
</script>
{% endblock %}