{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
  {% include '_components/header.html' with system_nav=True %}

  <div class="internal-wrapper">
    {% if error_message %}
      <div class="error-box" style="max-width: 400px;">{{ error_message }}</div>
    {% endif %}
    {% if info_message %}
      <div class="info-box" style="max-width: 400px;">{{ info_message }}</div>
    {% endif %}
    <form style="max-width: 400px;" class="form-box" method="POST">
      <h2>{% trans 'Change Password' %}</h2>
      <input id="password-old" type="password" name="oldPassword" placeholder="{% trans 'Old Password' %}" required>
      <input id="password1" type="password" name="password1" placeholder="{% trans 'New Password' %}" required>
      <input id="password2" type="password" name="password2" placeholder="{% trans 'New Password (Confirm)' %}" required>
      <input id="password-name" type="hidden" name="name" value="{{ admin.name }}">
      {% csrf_token %}
      <div id="password-bar"></div>
      <button id="password-submit" disabled>{% trans 'Change Password' %}</button>
    </form>
  </div>
  <script type="application/javascript" src="{% static 'js/password_strength.js' %}"></script>
{% endblock %}