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

{% block title %}Change Password - AI ML Operations, LLC{% endblock %}

{% block content %}
<div class="section">
    <div class="container" style="max-width: 600px; margin: 0 auto; padding: 4rem 1rem;">
        <h2 class="section-title">Change Password</h2>

        <div class="card"
            style="padding: 2rem; background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border-color);">
            {% if messages %}
            {% for message in messages %}
            <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
                style="margin-bottom: 1rem; padding: 1rem; border-radius: 4px; {% if message.tags == 'error' %}background-color: rgba(255, 0, 0, 0.1); color: #ff4444; border: 1px solid #ff4444;{% else %}background-color: rgba(0, 255, 255, 0.1); color: var(--cyber-cyan); border: 1px solid var(--cyber-cyan);{% endif %}">
                {{ message }}
            </div>
            {% endfor %}
            {% endif %}

            <form method="post">
                {% csrf_token %}
                {% for field in form %}
                <div class="form-group" style="margin-bottom: 1.5rem;">
                    <label for="{{ field.id_for_label }}"
                        style="display: block; margin-bottom: 0.5rem; color: var(--text-color);">{{ field.label
                        }}</label>
                    {{ field }}
                    {% if field.help_text %}
                    <small class="form-text"
                        style="display: block; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">{{
                        field.help_text }}</small>
                    {% endif %}
                    {% for error in field.errors %}
                    <p class="error-message" style="margin-top: 0.25rem; color: #ff4444; font-size: 0.85rem;">{{ error
                        }}</p>
                    {% endfor %}
                </div>
                {% endfor %}

                <div style="margin-top: 2rem;">
                    <button type="submit" class="btn"
                        style="width: 100%; padding: 0.75rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; background: linear-gradient(90deg, #00d4ff 0%, #0099ff 100%);">Update
                        Password</button>
                </div>
            </form>

            <div style="margin-top: 1.5rem; text-align: center;">
                <a href="{% url 'public_index' %}"
                    style="color: var(--text-muted); text-decoration: none; font-size: 0.9rem;">&larr; Back to Home</a>
            </div>
        </div>
    </div>
</div>

<style>
    .form-group input {
        width: 100%;
        padding: 0.75rem;
        background: #1a1a1a;
        border: 1px solid #333;
        border-radius: 4px;
        color: white;
        box-sizing: border-box;
    }

    .form-group input:focus {
        outline: none;
        border-color: var(--cyber-cyan);
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }
</style>
{% endblock %}