{% extends 'base/list.twig' %}

{% block header_actions %}{% endblock %}

{% block content %}

  <div class="container-fluid">
    <div class="row x-small-space-xs flex middle-xs">
      <div class=" horizontal-padding-small col-xs-12 col-md-3">

        <validation-provider
          tag="div"
          name="dateStart"
          rules="date"
          v-slot="{ errors, valid }">
          <base-input
            name="dateStart"
            type="date"
            format="DD/MM/YYYY"
            value-type="format"
            mask="date"
            :disabled-date="disabledFinalDate"
            @input="onInitialDate"
            :error="errors[0]"
            :valid="valid"
            v-model="filters.dateStart"
            :label="entry_date_start">
          </base-input>

        </validation-provider>
      </div>

      <div class=" horizontal-padding-small col-xs-12 col-md-3">
        <validation-provider
          tag="div"
          name="dateEnd"
          rules="date"
          v-slot="{ errors, valid }">
          <base-input
            name="dateEnd"
            type="date"
            format="DD/MM/YYYY"
            value-type="format"
            :disabled-date="disabledFinalDate"
            @input="onFinalDate"
            mask="date"
            :error="errors[0]"
            :valid="valid"
            v-model="filters.dateEnd"
            :label="entry_date_end">
          </base-input>
        </validation-provider>

      </div>

      <div class=" horizontal-padding-small col-xs-12 col-md">
          <validation-provider
            tag="div"
            name="description">
            <base-input
              type="text"
              name="description"
              v-model="filters.description"
              :label="entry_description">
            </base-input>
          </validation-provider>
      </div>

      <div class=" horizontal-padding-small col-xs-width-auto">
        <base-button
          class="btn-medium-square js-suspended-filter-control top-margin-large"
          type="button"
          id="suspended-side-filter"
          :disabled="disableForm"
          :loading="btnSubmitLoading"
          @click.native="filter()">
          <i class="fas fa-filter"></i>
          <span>Filtrar</span>
        </base-button>
      </div>
    </div>

      <div v-if="list.length > 0">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box background-white bottom-border-gray padding-medium top-margin-small">
              <div class="row no-space-xs middle-xs">

                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_name }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_codigo }}</span>
                </div>
                <div class="col-xs-1">
                  <span class="text-small text-dark text-bold">{{ column_date_start }}</span>
                </div>
                <div class="col-xs-1">
                  <span class="text-small text-dark text-bold">{{ column_date_end }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_quantidade_inicio }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark text-bold">{{ column_quantidade_utilizada }}</span>
                </div>
                <div class="col-xs-1">
                  <span class="text-small text-dark text-bold">{{ column_media }}</span>
                </div>
                <div class="col-xs-1">
                  <span class="text-small text-dark text-bold">{{ column_total }}</span>
                </div>
              </div>
            </div>

              <div v-for="lists in list" class="content-box background-white padding-medium bottom-border-gray">
                <div class="row no-space-xs middle-xs">

                  <div class="col-xs-2">
                    <span v-text="lists.NAME" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.CODE" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-1">
                    <span v-text="lists.date_start" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-1">
                    <span v-text="lists.date_end" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.uses_total" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-2">
                    <span v-text="lists.Qtd" class="text-small text-dark "></span>
                  </div>
                  <div class="col-xs-1">
                    <span v-text="lists.media" class="text-small text-dark"></span>
                  </div>
                  <div class="col-xs-1">
                    <span v-text="lists.valTotal" class="text-small text-dark"></span>
                  </div>
                </div>
              </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12">
            <list-Pagination
              :pagination="pagination"
              :current-Page="currentPage"
              :limit="limit"
              @callback="filter"
            ></list-Pagination>
          </div>
        </div>
      </div>

      <div v-else class="row">
        <div class="col-xs-12">
          <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-medium">
            <span class="text-medium text-gray">{{ text_no_results }}</span>
          </div>
        </div>
      </div>
  </div>

{% endblock %}