{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6 col-lg-5">
    <div class="card p-4 shadow-sm">
      <h2 class="mb-4">{{ _('Change Password') }}</h2>
      <form method="POST" aria-label="{{ _('Change password form') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
          <label for="current_password" class="form-label">{{ _('Current Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
          <input type="password" id="current_password" name="current_password" class="form-control" required autocomplete="current-password" aria-required="true">
        </div>
        <div class="mb-3">
          <label for="new_password" class="form-label">{{ _('New Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
          <input type="password" id="new_password" name="new_password" class="form-control" required autocomplete="new-password" aria-required="true">
        </div>
        <div class="mb-3">
          <label for="confirm_password" class="form-label">{{ _('Confirm New Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
          <input type="password" id="confirm_password" name="confirm_password" class="form-control" required autocomplete="new-password" aria-required="true">
        </div>
        <button type="submit" class="btn btn-primary">{{ _('Change Password') }}</button>
        <a href="{{ url_for('index') }}" class="btn btn-outline-secondary ms-2">{{ _('Cancel') }}</a>
      </form>
    </div>
  </div>
</div>
{% endblock %}