{{ 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">
      <div class="content-box">
        <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 style="max-width: 780px;">
                <div class="flex">
                  <div class="row">
                    {# Senha atual#}
                    <div class="col-xs-12">
                      <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">
                      <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>
                    
                    {# Confirme nova senha #}
                    <div class="col-xs-12 col-md-6">
                      <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 class="col-xs-6 col-md-6 top-margin-small">
                  <div class="flex gap-4">
                    <div>
                      <button type="submit" class="btn-base-context" title="Salvar" @click.prevent="validate()">
                        <i class="fa-solid fa-floppy-disk"></i>
                      </button>
                    </div>
                    <div>
                      <a class="btn-base-context" title="Cancelar" href="{{ back }}">
                        <i class="fa-solid fa-xmark"></i>
                      </a>
                    </div>
                  </div>
							  </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>

