{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
  {% if admin %}
    {% include '_components/header.html' %}
  {% else %}
    {% include '_components/header.html' with no_nav=True %}
  {% endif %}

  <div class="internal-wrapper">
    {% if error_message %}
      <div class="error-box">{{ error_message }}</div>
    {% endif %}
    {% if info_message %}
      <div class="info-box">{{ info_message }}</div>
    {% endif %}
    <div id="change-password-internal-wrapper">
      <form class="form-box" method="POST">
        <h2>{% trans 'Change Password' %}</h2>
        {% if resource %}
          <input id="password-name" type="text" name="name" value="{{ resource.name }}" readonly tabindex="-1">
        {% elif user_name %}
          <input id="password-name" type="text" name="name" value="{{ user_name }}" readonly tabindex="-1">
        {% else %}
          <input id="password-name" type="text" name="name" placeholder="{% trans 'userName' %}">
        {% endif %}
        {% if not admin %}
          {% if not is_reset %}
            {% if self_password_reset %}
              <div style="text-align: right;"><a tabindex="-1" href="{% url 'end_user_password_reset' target=target %}">{% trans 'Forget your password?' %}</a></div>
            {% endif %}
            <input id="password-old" type="password" name="oldPassword" placeholder="{% trans 'Old Password' %}" required>
          {% endif %}
        {% endif %}
        <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>
        {% csrf_token %}
        {% if admin %}
          <label>
            <input id="password-random-checkbox" type="checkbox">
            <span>{% trans 'Generate Random Password' %}</span>
          </label>
          {% include '_components/select_backends.html' with backends=resource.backends %}
        {% endif %}
        <div id="password-bar"></div>
        <button id="password-submit" class="submit-with-confirm" data-confirm="{% trans 'Are you sure you want to change the password?' %}" data-canceled="{% trans 'Canceled' %}" disabled>{% trans 'Change Password' %}</button>
      </form>
      <div id="change-password-policy-rule">
        {% if password_policy_message %}
          <pre>{{ password_policy_message }}</pre>
        {% else %}
          <h2>{% trans 'Password Policy' %}</h2>
          <table>
            <tr><td>{% trans 'Maximum length' %}</td><td>{{ password_policy.max }}</td></tr>
            <tr><td>{% trans 'Minimum length' %}</td><td>{{ password_policy.min }}</td></tr>
            <tr><td>{% trans 'Uppercase letters' %}</td><td>{{ password_policy.upper }}</td></tr>
            <tr><td>{% trans 'Lowercase letters' %}</td><td>{{ password_policy.lower }}</td></tr>
            <tr><td>{% trans 'Symbol characters' %}</td><td>{{ password_policy.symbol }}</td></tr>
            <tr><td>{% trans 'Digit characters' %}</td><td>{{ password_policy.digit }}</td></tr>
            <tr><td>{% trans 'Complexity' %}</td><td>{{ password_policy.complexity }}</td></tr>
            <tr><td>{% trans 'Prohibited characters' %}</td><td>{{ password_policy.prohibited }}</td></tr>
            <tr><td>{% trans 'Must NOT contain name' %}</td><td>{{ password_policy.must_not_contain_name }}</td></tr>
            <tr><td>{% trans 'Must be different from old password' %}</td><td>{{ password_policy.must_be_different_from_old }}</td></tr>
            <tr><td>{% trans 'Must be various' %}</td><td>{{ password_policy.must_be_various }}</td></tr>
            <tr><td>{% trans 'Must be disorder' %}</td><td>{{ password_policy.must_be_disorder }}</td></tr>
          </table>
        {% endif %}
        <div id="policy-error">
          <p id="policy-error-ok">
            {% trans 'The password satisfies policy' %}
            {% if admin %}
              <br>
              {% trans 'Password enterd by Administrators is only checked for length.' %}
            {% endif %}
          </p>
          <p id="policy-error-availablechars">{% trans 'Please use only letters(a..z and A..Z), numbers(0..9) and allowed special characters' %}</p>
          <p id="policy-error-max">{% trans 'The password is too long' %}</p>
          <p id="policy-error-min">{% trans 'The password is too short' %}</p>
          <p id="policy-error-upper">{% trans 'The password does not contain sufficient uppercase letters' %}</p>
          <p id="policy-error-lower">{% trans 'The password does not contain sufficient lowercase letters' %}</p>
          <p id="policy-error-symbol">{% trans 'The password does not contain sufficient symbol characters' %}</p>
          <p id="policy-error-digit">{% trans 'The password does not contain sufficient digit characters' %}</p>
          <p id="policy-error-complexity">{% trans 'The password does not meet the complexity requirements' %}</p>
          <p id="policy-error-prohibited">{% trans 'The password contains prohibited characters' %}</p>
          <p id="policy-error-must-not-contain-name">{% trans 'The password contains user name' %}</p>
          <p id="policy-error-must-be-different-from-old">{% trans 'The password is same as old password' %}</p>
          <p id="policy-error-must-be-various">{% trans 'The password does not contain enough different characters' %}</p>
          <p id="policy-error-must-be-disorder">{% trans 'The password is too simplistic/systematic' %}</p>
          <p id="policy-error-confirmation">{% trans 'Password and Password (Confirm) does not match' %}</p>
        </div>
      </div>
    </div>
  </div>
  <script type="application/javascript">
    var passwordPolicy = {{ password_policy_js|safe }};
    {% if admin %}
    var isAdmin = true;
    {% else %}
    var isAdmin = false;
    {% endif %}
  </script>
  <script type="application/javascript" src="{% static 'js/policy_check.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/password_strength.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/password_random.js' %}"></script>
  <script type="application/javascript" src="{% static 'js/submit_confirm.js' %}"></script>
{% endblock %}