{% extends "hub/base.html" %}
{% load static %}
{% block title %}Change Password - SciTeX Orochi{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'hub/auth.css' %}">
{% 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 %}