{{ header }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-3 hidden-md-down">
      {{ account }}
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ back }}" class="padding-small text-x-large text-dark">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>
        <form action="{{ action }}" method="post" enctype="multipart/form-data">
          <div style="max-width: 480px;">
            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ entry_current_password }}</span>
              <input class="field-entry {{ (error_current_password) ? 'border-error' : '' }}" id="current_password"
                type="password" name="current_password" value="{{ current_password }}"
                placeholder="{{ entry_current_password_placeholder }}" maxlength="20">
              {{ (error_current_password) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_current_password ~ '</span>' : '' }}
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ entry_password }}</span>
              <input class="field-entry {{ (error_password) ? 'border-error' : '' }}" id="password" type="password"
                name="password" value="{{ password }}" placeholder="{{ entry_password_placeholder }}" maxlength="20">
              {{ (error_password) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_password ~ '</span>' : '' }}
            </label>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ entry_confirm }}</span>
              <input class="field-entry {{ (error_confirm) ? 'border-error' : '' }}" id="confirm" type="password"
                name="confirm" value="{{ confirm }}" placeholder="{{ entry_confirm_placeholder }}" maxlength="20">
              {{ (error_confirm) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_confirm ~ '</span>' : '' }}
            </label>

            <div class="top-margin-x-large">
              <button type="submit" class="btn-default btn-large">
                <span>Definir nova senha</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>
{{ footer }}

<script>
  window.waitEvent('scripts_document', function () {
    if ($('.text-error').length > 0) {
      $('.field-entry').on('keydown', function () {
        $(this).removeClass('border-error');
        $(this).siblings('.text-error').remove();
      });
    }
  });
</script>
