<template>
  <div id="banner">
    <div class="container-fluid background-white shadow-small">
      <div v-if="screenSelected === 'addNewBanner'">
        <BannerUpdateConfiguration></BannerUpdateConfiguration>
      </div>
      <div v-if="screenSelected === 'updateBannerSettings'">
        <BannerUpdateConfiguration></BannerUpdateConfiguration>
      </div>
      <div v-else-if="screenSelected === 'ImagesBannerHomePage'">
        <ImagesBannerHomePage></ImagesBannerHomePage>
      </div>

      <div v-else-if="screenSelected === 'bannerHomePageUpdateConfiguration'">
        <SettingsBannerHomePage
          v-model="configurations.settingsBannerHomePage">
        </SettingsBannerHomePage>
      </div>

      <div v-else-if="screenSelected === 'bannerHomePageConfiguration'">
        <ProductsBannerHomePage></ProductsBannerHomePage>
      </div>


      <div v-else-if="screenSelected === 'modalSearchProduct'">
        <ProductsBannerHomePage></ProductsBannerHomePage>
      </div>

      <div v-else-if="screenSelected === 'BannerDynamicConfiguration'">
        <BannerDynamicConfiguration></BannerDynamicConfiguration>
      </div>
      <div v-else-if="screenSelected === 'MosaicModuleSecundaryBanner'">
        <MosaicStyles></MosaicStyles>
      </div>
      <div v-else-if="screenSelected === 'HomePage'">
        <div class="flex-content-tab between-xs">
          <div class="flex col-xs-7 col-md-7">
            <div
              @click.prevent="setTabNameOnStore('HomePageBanner')"
              class="cursor-pointer flex col-xs-5 center-sm col-md-5"
              :class="HomePageBannertabActived ? 'is-active' : ''">
              <span v-text="getLanguage('text_banner_home_page')"
                :class="HomePageBannertabActived ? 'text-is-active' : ''"
                class="text-small text-center text-dark-opacity text-bold full-width text-ellipsis">

              </span>
            </div>
            <div
              @click.prevent="setTabNameOnStore('secundaryBanner')"
              class="cursor-pointer flex col-xs-5 center-sm col-md-5"
              :class="HomePageBannertabActived ? '' : 'is-active'">
              <span
                v-text="getLanguage('text_banner_secundary_page')"
                :class="HomePageBannertabActived ? '' : 'text-is-active'"
                class="text-small text-center text-dark-opacity text-bold full-width text-ellipsis"></span>
            </div>
          </div>
          <div
            :class="
              HomePageBannertabActived === true
                ? 'flex between-xs col-xs-1 col-md-1'
                : 'flex between-xs col-xs-3 col-md-3'"
            :style="HomePageBannertabActived === true ? 'max-width: 28.333%; justify-content: end;' : ''" >


            <div class="bannerHomePageUpdateConfiguration"
              @click.prevent="setScreenName('bannerHomePageUpdateConfiguration')"
              v-if="HomePageBannertabActived === true">
              <base-button
                apperance="outline"
                style="padding: 1.5rem; !important;"
                class="btn-default btn-outline btn-medium hover:shadow-small-clean padding-medium">
                <i class="fas fa-cog"></i>
              </base-button>
            </div>

          </div>
        </div>
        <div v-if="HomePageBannertabActived === true">
          <PrimaryBanner></PrimaryBanner>
        </div>
        <div class="flex col-xs-12 col-md-12" v-else>
          <div class="col-xs-4 col-md-4" style="padding: 0 !important">
            <SecundaryBannerComponents></SecundaryBannerComponents>
          </div>
          <div class="col-xs-8 col-md-8 no-padding" style="margin-top: 8px;">

            <div v-show="storeBannerID" class="bottom-margin-medium margin-adjust card-border-radius-tag shadow-medium">
              <div class="flex between-xs between-xs">
                <ListTypeOfBannerSecundary></ListTypeOfBannerSecundary>
              </div>
              <br />
              <div class="row flex between-xs between-xs">
                <div class="col-xs-6 dark-card col-md-6">
                  <ListTypeOfCarrosselSecundary></ListTypeOfCarrosselSecundary>
                </div>
                <div class="col-xs-6 dark-card col-md-6">
                  <ListTypeOfMosaicSecundary></ListTypeOfMosaicSecundary>
                </div>
              </div>
            </div>
            <div v-show="!storeBannerID"   class="bottom-margin-medium margin-adjust ">
              <div class="content-box vertical-padding-x-large text-center">
                <i class="fas fa-circle-xmark"></i>
                <span class=" text-medium " v-text="getLanguage('text_not_encontred')"> </span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

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