{{ header }}

<section class="container-fluid" id="root">

  {% if content_top %}
    {{ content_top }}
  {% endif %}

  {{breadcrumbs}}

  <div class="row">
    <div class="col-md-4 hidden-md-down">
      {{ account }}
    </div>
    <div class="col-xs no-padding">
      <div class="content-box top-margin-medium">
        <div class="background-base-content">
          <div class="header-card-back">
            <a href="{{ back }}" class="text-small-link">
              <i class="fa-solid fa-arrow-left"></i>
              Voltar
            </a>
					</div>
          <base-content :icon="'fa fa-key'" title="{{ heading_title }}">
            <form action="{{ action }}" method="post" enctype="multipart/form-data">
              <div class="flex">
                <div class="row no-margin">

                  {# Senha atual#}
                  <div class="col-xs-12 no-padding top-margin-medium">
                    <base-input
                      label="{{ entry_current_password }}"
                      placeholder="{{ entry_current_password_placeholder }}"
                      name="current_password"
                      v-model="current_password"
                      type="password"
                      maxlength="20"
                      mask="password"
                      id="current_password"
                      :secret="true"
                      @input="colorField('current_password'); error.current_password = ''">
                    </base-input>
                    <div v-if="error.current_password">
                      <span class="text-error text-small text-left top-margin-x-small visible-block" v-text="error.current_password"></span>
                    </div>
                  </div>

                  {# Nova senha #}
                  <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
                    <div class="padding-leftColumn responsive-padding">
                      <base-input
                        label="{{ entry_password }}"
                        placeholder="{{ entry_password_placeholder }}"
                        name="password"
                        v-model="password"
                        type="password"
                        maxlength="20"
                        mask="password"
                        id="password"
                        :secret="true"
                        @input="colorField('password'); colorField('confirm'); error.password = ''; error.confirm = ''">
                      </base-input>
                      <div v-if="error.password">
                        <span class="text-error text-small text-left top-margin-x-small visible-block" v-text="error.password"></span>
                      </div>
                    </div>
                  </div>

                  {# Confirme nova senha #}
                  <div class="col-xs-12 col-md-6 no-padding top-margin-medium">
                    <div class="padding-rightColumn responsive-padding">
                      <base-input
                        label="{{ entry_confirm }}"
                        placeholder="{{ entry_confirm_placeholder }}"
                        name="confirm"
                        v-model="confirm"
                        type="password"
                        maxlength="20"
                        mask="password"
                        id="confirm"
                        :secret="true"
                        @input="colorField('confirm'); error.confirm = '';">
                      </base-input>
                      <div v-if="error.confirm">
                        <span class="text-error text-small text-left top-margin-x-small visible-block" v-text="error.confirm"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-xs-6 col-md-6 top-margin-medium no-padding">
                <div class="flex gap-4">
                  <button type="submit" class="btn-base-context" title="Salvar" @click.prevent="validate()">
                    <i class="fa-solid fa-floppy-disk"></i>
                  </button>
                  <a class="btn-base-context" title="Cancelar" href="{{ back }}">
                    <i class="fa-solid fa-xmark"></i>
                  </a>
                </div>
              </div>
            </form>
          </base-content>
        </div>
      </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 type="text/javascript">
  const DATA = {{ dataVue|json_encode() }};
</script>

