<template>
  <div class="col-xs-12 col-md-12">
    <div class="flex middle-xs text-dark-opacity nowrap-xs bottom-padding-small bottom-border-dark-gray text-ellipsis ">
      <span class="text-small text-bold full-width text-ellipsis">Carrossel</span>
      <div
        @click="
          setFlag('create');
          setModuleType('carousels');
          updateSettingsBanner('updateBannerSettings');"
        class="flex between-xs cursor-block"
        style="max-width: 28.333%; align-items: center;"
      >
        <div>
          <base-button
            apperance="white"
            size="small">
            <i class="fa-solid fa-plus"></i>
          </base-button>
        </div>
      </div>
    </div>

    <draggable style="max-height: 285px; overflow-y: scroll; padding: 0px 2px 0px 2px">
      <div style="margin-top: 5px;" v-if="handleModuleCarrousel.length > 0">
        <div
          v-for="(bannerName, index) in handleModuleCarrousel"
          :key="index"
          class="button-banner-module card-border-radius-tag flex shadow-small padding-medium bottom-margin-small hover:shadow-small-clean cursor-pointer rel"
          v-if="bannerName !== undefined"
          @click="
            setFlag('edit');
            setModuleType('carousels');
            updateSettingsBanner('updateBannerSettings', index);">
          <div>
            <p class="text-small full-width  text-align-top">
              {{ bannerName.searchLayoutById.name }} <br />
              <span
                v-if="bannerName.bannersSubModulesCallBack.status === '0'"
                class="text-small text-sub-title full-width text-ellipsis"
              >
                Desabilitado
              </span>
              <span v-else class="text-small text-sub-title full-width text-ellipsis">
                Habilitado
              </span>
            </p>
          </div>
          <div
            class="model-button"
            @click.stop="removeModulesWithBanner(bannerName.bannersSubModulesCallBack.banner_id)"
          >
            <i class="text-dark-opacity scale-small fas fa-trash"></i>
          </div>
        </div>
      </div>
      <div v-else>
        <div
          class="flex nowrap-xs middle-xs rel" >
          <div class="flex full-width text-ellipsis">
            <p v-text="getLanguage('text_not_encontred')"
              class="text-small text-align-top">
            </p>
            <span
              v-text="getLanguage('button_add_module')"
              class="text-small text-sub-title full-width text-ellipsis">
              </span>
          </div>
        </div>
      </div>
    </draggable>
  </div>
</template>

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