{{ header }}
<div id="root">
  <div class="page-loader" v-show="isLoading"></div>

  <the-header
    title="{{ heading_title }}"
    :breadcrumbs='{{ breadcrumbs|json_encode() }}'>

    <base-button
      href="{{ data.back }}"
      apperance="outline">
      {{ button_cancel }}
    </base-button>

    <template #notification>
      <base-alert
        v-show="alert.type"
        :apperance="alert.type"
        @close="alert = {}">
        <span v-text="alert.message"></span>
      </base-alert>
    </template>
  </the-header>

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <base-card class="padding-large">
          <validation-observer
            ref="validationObserver"
            tag="div"
            v-slot="{ handleSubmit, invalid }"
            @submit.prevent="onValidationObserverSubmit()">
            <form
              ref="form"
              @submit.prevent="handleSubmit(onSubmit)"
              action="{{ data.action }}"
              autocomplete="off"
              method="post">

              <span class="visible-block text-medium text-dark">{{ text_help }}</span>

              <validation-provider
                tag="div"
                name="date_initial"
                class="top-margin-large"
                rules="required|date"
                v-slot="{ errors, valid }">
                <base-input
                  label="{{ text_date_inicitial }}"
                  name="date_initial"
                  type="date"
                  format="DD/MM/YYYY"
                  value-type="format"
                  mask="date"
                  :disabled-date="disabledInitialDate"
                  @input="onInitialDate"
                  :value="initialDate"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  @keydown="(e) => e.preventDefault()"
                >
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                name="date_ended"
                class="top-margin-large">
                <base-input
                  label="{{ text_date_ended }}"
                  name="date_ended"
                  value-type="format"
                  mask="date"
                  :value="finalDate"
                  readonly>
                </base-input>
              </validation-provider>


              <base-button
                class="top-margin-large"
                type="submit"
                :disabled="disableForm"
                :loading="btnSubmitLoading">
                {{ button_execute }}
              </base-button>
            </form>
          </validation-observer>
        </base-card>
      </div>
    </div>
  </div>
</div>

<script>
  const DATA = {{ data|json_encode() }};
</script>

{{ footer }}