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

{% block title %}Change Password - Lusaka Internet Meetup{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <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;">
                <h2 class="h3 mb-3 fw-normal">Change Your Password</h2>
                <p class="text-muted">Please enter your old password, then enter your new password twice.</p>
            </div>
            
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        {% if form.errors %}
                        <div class="alert alert-danger">
                            Please correct the errors below.
                        </div>
                        {% endif %}
                        
                        {% for field in form %}
                        <div class="form-floating mb-3">
                            {{ field }}
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {% if field.errors %}
                            <div class="invalid-feedback d-block">
                                {{ field.errors|join:', ' }}
                            </div>
                            {% endif %}
                            {% if field.help_text %}
                            <div class="form-text">{{ field.help_text }}</div>
                            {% endif %}
                        </div>
                        {% endfor %}

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-key"></i> Change Password
                            </button>
                            <a href="{% url 'events:user_profile' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left"></i> Back to Profile
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}