{% load i18n %}
{% block content %}
  <div style="margin: 15px;">
    <form class="layui-form action-form" lay-filter="change_password" action="{{ form_url }}" method="post"
          id="user_changepassword_navbar">{% block form_top %}{% endblock %}
      <div>
        {% if is_popup %}<input type="hidden" name="_popup" value="1"/>{% endif %}
        {% if form.error_dict %}
          <p class="errornote">
            {% blocktrans count form.error_dict.items|length as counter %}Please correct the error below.{% plural %}
              Please correct the errors below.{% endblocktrans %}
          </p>
        {% endif %}


        {% csrf_token %}
        {% for field in form %}
          <div class="layui-form-item">
            <label for="{{ field.id_for_label }}" class="layui-form-label" style="width: 140px;">{{ field.label }}<span
              class="required">*</span></label>
            <div class="layui-input-inline">
              {{ field }}
            </div>
            {{ form.password_original.html_error_list }}
          </div>
        {% endfor %}
        {#<script type="text/javascript">document.getElementById("{{ first_form_field_id }}").focus();</script>#}
      </div>
    </form>
  </div>
  <script>
    layui.use(['form', 'laydate'], function () {
      var form = layui.form;
      var laydate = layui.laydate;
      $("form.layui-form input.layui-datetime").each(function () {
        laydate.render({elem: this, type: 'datetime'});
      });
      $("form.layui-form input.layui-date").each(function () {
        laydate.render({elem: this, type: 'date'});
      });
      $("form.layui-form input.layui-time").each(function () {
        laydate.render({elem: this, type: 'time'});
      });
      form.render();
    });
    $("#id_password_original").focus();
  </script>
{% endblock %}