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

{% block banner %}
  <div class="container-fluid" v-if="displayAside === 'BannerUpdateHomePage'">
    <div class="col-xs-12 col-md-12">
      <base-card>
        <div class="col-xs-12 col-md-12">
          <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small">
            <base-button
              @click.prevent.native="onClickBackHome"
              apperance="white"
              square
              size="small"
            >
              <template #icon>
                <i class="fas fa-arrow-left"></i>
              </template>
            </base-button>
            <span
              class="text-medium text-dark text-bold full-width text-ellipsis">Configurações - { bannerContent.name }</span>
            <base-button
              @click.prevent.native="displayAside = 'BannerHomePageUpdateImage'"
              apperance="white"
              square
              size="large"
              class="left-margin-medium"
            >
              <template #icon>
                <i class="fa-solid fa-image"></i>
              </template>
              Imagens
            </base-button>

            <base-button
              @click.prevent.native="displayAside = 'BannerHomePageUpdateImage'"
              apperance="white"
              square
              size="large"
              class="left-margin-medium"
            >
              <template #icon>
                <i class="fa-solid fa-image"></i>
              </template>
              Layout
            </base-button>
          </div>


          {# Componentizar aqui também #}
          <div class="row">
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="status"
                v-slot="{ errors, valid }">
                <base-select
                  name="status"
                  :label="label_status"
                  v-model="bannerContent.status"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                  <option
                    class="bottom-margin-medium"
                    v-for="(value, key) in Type_Status"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="tipo_configuracao"
                v-slot="{ errors, valid }">
                <base-select
                  name="tipo_configuracao"
                  :label="label_configuration_type"
                  v-model="bannerContentImage.tipo_configuracao"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                  <option
                    v-for="(value, key) in Type_AdvancedOrSimple"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required"
                name="tipo_configuracao"
                v-slot="{ errors, valid }">
                <base-select
                  name="tipo_configuracao"
                  :label="label_configuration_type"
                  v-model="bannerContentImage.tipo_configuracao"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                  <option
                    v-for="(value, key) in Type_AdvancedOrSimple"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                {# v-if="bannerContentImage.tipo_banner == 0" #}
                tag="div"
                class="top-margin-small"
                rules="required"
                name="tipo_posicionamento"
                v-slot="{ errors, valid }">
                <base-select
                  name="tipo_posicionamento"
                  :label="label_position_type"
                  v-model="bannerContentImage.tipo_posicionamento"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                  <option
                    v-for="(value, key) in Type_ScreenPosition"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
            <div class="col-xs-12 col-md-12">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required"
                name="hide_responsive"
                v-slot="{ errors, valid }">
                <base-select
                  name="hide_responsive"
                  :label="label_hyde_responsive"
                  v-model="bannerContentImage.hide_responsive"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                  <option
                    v-for="(value, key) in Type_DsimDnao"
                    :key="key"
                    :value="key"
                  >
                    { value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required|minmax_number:0,1920"
                name="banner_largura"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="banner_largura"
                  :label="label_width_large"
                  v-model="bannerContentImage.banner_largura"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                >
                </base-input>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required|minmax_number:0,1920"
                name="banner_altura"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="banner_altura"
                  :label="label_height_large"
                  v-model="bannerContentImage.banner_altura"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required|minmax_number:0,1920"
                name="banner_responsive_largura"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="banner_responsive_largura"
                  :label="label_width_small"
                  v-model="bannerContentImage.banner_responsive_largura"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>
            </div>
            <div class="col-xs-6 col-md-6">
              <validation-provider
                tag="div"
                class="top-margin-small"
                rules="required|minmax_number:0,1920"
                name="banner_responsive_altura"
                v-slot="{ errors, valid }"
              >
                <base-input
                  type="text"
                  name="banner_responsive_altura"
                  :label="label_height_small"
                  v-model="bannerContentImage.banner_responsive_altura"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>
            </div>
          </div>
        </div>
      </base-card>
    </div>
  </div>
{% endblock banner %}