<template>
  <div class="col-xs-12 col-md-12">
    <div @click.prevent="onClickBackToHomePage('HomePage')" class="flex center-xs text-dark-opacity nowrap-xs text-ellipsis padding-medium">
      <base-button
        apperance="white"
        square
        size="small"
        class="right-margin-medium"
      >
        <template #icon>
          <i class="fas fa-arrow-left"></i>
        </template>
      </base-button>
      <span class="align-center-xs top-margin-medium text-medium text-bold full-width text-ellipsis"
        >Configurações das imagens banner página principal</span
      >
    </div>
    <div class="row margin-medium">
      <div class="col-xs-9 col-md-9 border-white margin-auto">
        <div class="col-xs-5 col-md-5 box-image">
          <div class="button-add-image">
            <i class="fa-solid fa-folder-plus text-medium text-gray"></i>
          </div>

          <div class="icon-adjust-size">
            <i class="fa-regular fa-image text-medium text-gray fa-10x" style="color: #2a2a2a;"></i>
          </div>
          <p class="label-add-image">Arraste para adicionar imagem</p>
        </div>
        <div class="col-xs-5 col-md-5 box-image">
          <div class="button-add-image">
            <i class="fa-solid fa-folder-plus text-medium text-gray"></i>
          </div>

          <div class="icon-adjust-size">
            <i class="fa-regular fa-image text-medium text-gray fa-10x" style="color: #2a2a2a;"></i>
          </div>
          <p class="label-add-image">Arraste para adicionar imagem</p>
        </div>
      </div>
    </div>
    <div class="col-xs-11 col-md-11 margin-auto">
      <span class="left-margin-small bottom-margin-small text-medium text-dark-opacity visible-block text-ellipsis">
        <strong>Situação</strong>
      </span>
      <base-select name="status"></base-select>
    </div>
    <div class="col-xs-11 col-md-11 margin-auto">
      <div class="row">
        <div class="col-xs-6 col-md-6">
          <span class="left-margin-small bottom-margin-small text-medium text-dark-opacity visible-block text-ellipsis">
            <strong>Link de redirecionamento</strong>
          </span>
          <base-select name="tipo_configuracao"> </base-select>
        </div>
        <div class="col-xs-6 col-md-6">
          <span class="left-margin-small bottom-margin-small text-medium text-dark-opacity visible-block text-ellipsis">
            <strong>Abrir Link</strong>
          </span>
          <base-select name="tipo_banner"> </base-select>
        </div>
      </div>
    </div>
    <div class="col-xs-11 col-md-11 margin-auto ">
      <div class="flex between-xs bottom-xs col-xs-12 col-md-12 bottom-border-dark-gray">
        <span class="text-small bottom-xs text-ellipsis">Configurações Avançadas (Opcionais)</span>
        <div @click.prevent="advancedOptionsScreen()">
          <base-button apperance="outline" class="hover:shadow-small-clean">
            <i class="fa fa-angle-down"></i>
          </base-button>
        </div>
      </div>
    </div>
    <div class="col-xs-11 col-md-11 margin-auto" v-if="advancedOptions === true">
      <div class="row border-white">
        <div class="col-xs-6 col-md-6">
          <span class="left-margin-small bottom-margin-small text-medium text-dark-opacity visible-block text-ellipsis">
            <strong>Data Inicial</strong>
          </span>
          <base-input
            class="top-padding-medium"
            format="DD/MM/YYYY"
            type="date"
            value-type="format"
            mask="date"
            name="date_initial"
            :label="label_initial_date"
          ></base-input>
        </div>
        <div class="col-xs-6 col-md-6">
          <span class="left-margin-small bottom-margin-small text-medium text-dark-opacity visible-block text-ellipsis">
            <strong>Data Final</strong>
          </span>
          <base-input
            class="top-padding-medium"
            format="DD/MM/YYYY"
            type="date"
            value-type="format"
            mask="date"
            name="date_end"
            :label="label_final_date"
          ></base-input>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="./styles.css"></style>
<script src="./scripts.js"></script>
