<template>
  <div
    style="'min-height: 22rem'"
    class="limit-defined col-xs-4 col-md-4 margin-adjust card-border-radius-tag shadow-medium">
    <div
      class="flex middle-xs text-dark-opacity nowrap-xs bottom-border-dark-gray text-ellipsis bottom-padding-small" >
      <span class="text-small text-bold full-width text-ellipsis" v-text="getLanguage('label_list_image')"></span>
      <div>
        <base-button
          @click.native="createNewBannerImageModule();
                         setMethodEditionAndCreate('create');
                         handleOpenImageOnList('ImagesBannerHomePage', undefined)"
          apperance="white"
          size="small">
          <i class="fa-solid fa-plus"></i>
        </base-button>
      </div>
    </div>
    <br />
    <draggable
      v-bind="dragOptions"
      v-model="banner_image">
      <div
        v-for="(banner, bannerIndex) in banner_image"
        style="display: flex; justify-content: space-between !important;"
        class="flex nowrap-xs middle-xs padding-medium bottom-margin-small card-border-radius-tag shadow-small hover:shadow-small-clean cursor-pointer rel">
        <div
          @click.prevent="  handleOpenImageOnList('ImagesBannerHomePage', banner.analyze_id);
                            setBannerImageByAnalyzeId(banner.analyze_id);
                            setMethodEditionAndCreate('editon'); "
          class="flex full-width text-ellipsis">
<!--          <div class="box-images-center">-->
<!--            <i class="fa fa-bars"></i>-->
<!--          </div>-->
          <div class="box-images-center">
            <img style="width: 40px; height: 40px;" :src="banner.thumb" />
          </div>

          <p style="width: 50%;" class="col-xs-offset-1 text-small text-ellipsis">
            {{ banner.banner_image_description[1].title }}
            <br />
            <span class="text-small text-sub-title full-width text-ellipsis" v-text="getLanguage('label_info')"></span>
          </p>

        </div>
        <div @click.prevent="removeIndexBannerImage(banner.analyze_id)">
          <i class="text-dark-opacity scale-small fas fa-trash"></i>
        </div>
      </div>
    </draggable>
  </div>
</template>

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