{% extends "dashboard/base.html" %}
{% load i18n %}

{% block title %}{% trans "Change password" %}{% endblock %}

{% block content %}
<h1 class="h3 mb-3">{% trans "Change password" %}</h1>

<div class="card">
  <div class="card-body">
    <form method="post" novalidate>
      {% csrf_token %}

      {% if form.non_field_errors %}
        <div class="alert alert-danger">{{ form.non_field_errors }}</div>
      {% endif %}

      <div class="mb-3">
        <label class="form-label" for="{{ form.old_password.id_for_label }}">
          {{ form.old_password.label }}
        </label>
        <input type="password"
               class="form-control {% if form.old_password.errors %}is-invalid{% endif %}"
               name="{{ form.old_password.html_name }}"
               id="{{ form.old_password.id_for_label }}">
        {% for e in form.old_password.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="mb-3">
        <label class="form-label" for="{{ form.new_password1.id_for_label }}">
          {{ form.new_password1.label }}
        </label>
        <input type="password"
               class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}"
               name="{{ form.new_password1.html_name }}"
               id="{{ form.new_password1.id_for_label }}">
        {% for e in form.new_password1.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
        {% if form.new_password1.help_text %}
          <div class="form-text">{{ form.new_password1.help_text|safe }}</div>
        {% endif %}
      </div>

      <div class="mb-3">
        <label class="form-label" for="{{ form.new_password2.id_for_label }}">
          {{ form.new_password2.label }}
        </label>
        <input type="password"
               class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}"
               name="{{ form.new_password2.html_name }}"
               id="{{ form.new_password2.id_for_label }}">
        {% for e in form.new_password2.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">{% trans "Update password" %}</button>
        <a href="{% url 'dashboard:profile' %}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}