{% extends '_base.html' %}
{% load static %}
{% load i18n %}
{% block content %}

{% trans 'Change Password' as operation %}
{% include 'user/header.html' with title=operation %}

<div class="internal-wrapper">
{% for message in messages %}
    {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
        <div class="error-box">{{ message }}</div>
    {% else %}
        {% if message.level == DEFAULT_MESSAGE_LEVELS.INFO %}
            <div class="info-box">{{ message }}</div>
        {% endif %}
    {% endif %}
{% endfor %}

    <div id="change-password-internal-wrapper">

      <form class="form-box" method="POST">
        <h2>{% trans 'Change Password' %}</h2>
        {% if 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 require_old_password %}
            <input id="password-old" type="password" name="oldPassword" placeholder="{% trans 'Old Password' %}" required>
        {% endif %}
        {% if self_password_reset %}
            <div style="text-align: right;"><a tabindex="-1" href="{% url 'end_user_password_reset' target=target.id %}">{% trans 'Forget your password?' %}</a></div>
        {% 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 %}
        <div id="password-bar"></div>
        <button autocomplete="off" 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>

      {% include '_components/ppolicy.html' with admin=False %}

    </div>
</div><!-- internal-wrapper -->

<script type="application/javascript">
    var passwordPolicy = {{ ppolicy_json|safe }};
    var isAdmin = false;
</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 %}