{% load i18n %}
<div class="border border-primary rounded rounded-3 shadow p-3 h-100">
  {% with input_class="form-control border border-secondary my-1" %}
  <form method="POST">
    <h2 class="text-center">{% trans 'Change Password' %}</h2>
    <div class="row justify-content-center">
      <div class="col-md-11">
        {% if resource and resource.name is not None %}
          <input id="password-name" type="text" name="name" class="{{ input_class }}" value="{{ resource.name }}" readonly tabindex="-1">
        {% elif user_name %}
          <input id="password-name" type="text" name="name" class="{{ input_class }}" value="{{ user_name }}" readonly tabindex="-1">
        {% elif change_admin_password %}
          <input id="password-name" type="hidden" name="name" value="{{ admin.name }}" readonly tabindex="-1">
        {% else %}
          <input id="password-name" type="text" name="name" class="{{ input_class }}" placeholder="{% trans 'userName' %}" autocomplete="username">
        {% endif %}
      </div>
    </div>

    {% if require_old_password %}
      <div class="row justify-content-center">
        <div class="col-md-11">
          <div class="input-group">
            <input id="password-old" type="password" name="oldPassword" class="{{ input_class }}" placeholder="{% trans 'Old Password' %}" required autocomplete="off">
            <span class="input-group-text my-1" id="password-old-eye"><i class="bi-eye-fill"></i></span>
          </div>
        </div>
      </div>
    {% endif %}

    <div class="row justify-content-center">
      <div class="col-md-11">
        <div class="input-group">
          <input id="password1" type="password" name="password1" class="{{ input_class }}" placeholder="{% trans 'New Password' %}" required autocomplete="new-password">
          <span class="input-group-text my-1" id="password1-eye"><i class="bi-eye-fill"></i></span>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-11">
        <div class="input-group">
          <input id="password2" type="password" name="password2" class="{{ input_class }}" placeholder="{% trans 'New Password (Confirm)' %}" required autocomplete="new-password">
          <span class="input-group-text my-1" id="password2-eye"><i class="bi-eye-fill"></i></span>
        </div>
      </div>
    </div>
    {% csrf_token %}
    {% if admin and not change_admin_password%}
    <div class="row justify-content-center">
      <div class="col-md-11">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="password-random-checkbox">
          <label class="form-check-label" for="password-random-checkbox">
            {% trans 'Generate Random Password' %}
          </label>
        </div>
        {% include '_components/select_backends.html' with backends=resource.backends operation='change_password' default_select=resource.default_select %}
      </div>
    </div>
    {% endif %}
    <div class="row justify-content-center">
      <div class="col-md-11">
        <div id="password-bar"></div>
      </div>
    </div>
    {% if self_password_reset %}
      <div class="text-center">
        <a tabindex="-1" href="{% url 'end_user_password_reset' target=target.id %}">{% trans 'Forget your password?' %}</a>
      </div>
    {% endif %}
    <div class="d-flex justify-content-center">
    {% include '_components/sub_menu/button.html' with type='resource_confirm_change_password' %}
    </div>
  </form>
  {% endwith %}
</div>