<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" v-text="getLanguage('text_banners')"></span>
      <div
        @click="setFlag('create');
                setModuleType('banners');
                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 v-if="bannersModuleData.length > 0">
        <div
          v-for="(bannerName, index) in bannersModuleData"
          :key="index"
          @click="setFlag('edit');
                  setModuleType('banners');
                  updateSettingsBanner('updateBannerSettings', 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">
          <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"
                v-text="getLanguage('text_disable')">
              </span>
              <span
                v-else
                class="text-small text-sub-title full-width text-ellipsis"
                v-text="getLanguage('text_enable')">
              </span>
            </p>
          </div>
          <div
            class="model-button"
            @click.stop="removeModulesWithBanner(index)">
            <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>
