{% extends "hub/base.html" %}
{% load static %}
{% block title %}Change Password - SciTeX Orochi{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'hub/auth.css' %}?v=2">
{% endblock %}
{% block body %}
    <div class="auth-card">
        <img src="{% static 'hub/orochi-icon.png' %}" alt="Orochi" class="logo">
        <h1>Change Password</h1>
        <p class="subtitle">Update your account password</p>
        {% if messages %}
            {% for message in messages %}<div class="{{ message.tags }}">{{ message }}</div>{% endfor %}
        {% endif %}
        {% if form.non_field_errors %}<div class="error">{{ form.non_field_errors }}</div>{% endif %}
        <form method="post" action="{% url 'account_change_password' %}">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_oldpassword">Current password</label>
                <input type="password"
                       name="oldpassword"
                       id="id_oldpassword"
                       autocomplete="current-password"
                       autofocus
                       required>
                {% if form.oldpassword.errors %}<div class="error">{{ form.oldpassword.errors }}</div>{% endif %}
            </div>
            <div class="form-group">
                <label for="id_password1">New password</label>
                <input type="password"
                       name="password1"
                       id="id_password1"
                       autocomplete="new-password"
                       required>
                {% if form.password1.errors %}<div class="error">{{ form.password1.errors }}</div>{% endif %}
            </div>
            <div class="form-group">
                <label for="id_password2">Confirm new password</label>
                <input type="password"
                       name="password2"
                       id="id_password2"
                       autocomplete="new-password"
                       required>
                {% if form.password2.errors %}<div class="error">{{ form.password2.errors }}</div>{% endif %}
            </div>
            <button type="submit" class="btn btn-primary">Change Password</button>
        </form>
        <div class="auth-footer">
            <a href="/">Back to Dashboard</a>
        </div>
    </div>
{% endblock %}