<template>
  <div class="col-xs-8 col-md-8 right-padding-medium no-padding">
    <div style="min-height: 22rem" class="limit-defined background-white card-border-radius-tag  margin-adjust padding-medium shadow-medium">
      <div class="flex middle-xs nowrap-xs bottom-border-dark-gray text-ellipsis bottom-padding-small">
        <span class="text-small text-dark-opacity  text-bold full-width text-ellipsis" v-text="getLanguage('label_Listdinamico')"></span>
        <div>
          <base-button
            @click.native="flagprimaryDynamic('create');
                          setDynamicBannerConfiguration('BannerDynamicConfiguration')"
            apperance="white"
            size="small">
            <i class="fa-solid fa-plus"></i>
          </base-button>
        </div>
      </div>
      <br />
      <draggable
        v-bind="dragOptions"
        v-model="nameOfDynamicBanners">
        <div
          v-for="(banner, bannerIndex) in nameOfDynamicBanners"
          v-if="banner !== ''"
          @click.prevent="
            setDynamicDataWithRelationOnSettingsPage(banner.dataBanner[bannerIndex].banner_dinamico_analyze_id);
            flagprimaryDynamic('edit');
            setDynamicBannerConfiguration('BannerDynamicConfiguration');"
          style=" display: flex; justify-content: space-between !important; height: 72px"
          class="flex nowrap-xs middle-xs padding-medium card-border-radius-tag bottom-margin-small shadow-small hover:shadow-small-clean cursor-pointer rel">
          <div

            class="flex full-width">
<!--            <div class="box-images-center ">-->
<!--              <i class="fa fa-bars"></i>-->
<!--            </div>-->
            <p class="text-small ">
              {{ banner.layoutNames }} <br />
              <span class="text-small text-sub-title full-width text-ellipsis" v-text="getLanguage('label_info')"></span>
            </p>
          </div>
          <div @click.stop="removeIndexData(banner.dataBanner[bannerIndex].banner_dinamico_analyze_id, bannerIndex)">
            <i class="text-dark-opacity scale-small fas fa-trash"></i>
          </div>
        </div>
      </draggable>
    </div>
  </div>

</template>

<style scoped src="./styles.css"></style>
<script src="./scripts.js"></script>
<!-- setDynamicBannerConfiguration('BannerDynamicConfiguration')" -->
