<template>
  <div class="col-xs-8 col-md-8 right-padding-medium no-padding">
    <div style="min-height: 22rem" class="limit-defined padding-medium card-border-radius-tag margin-adjust shadow-medium">
      <div
        style="display: flex; justify-content: space-between !important;"
        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_ListPrduct')"></span>

        <div class=""
             @click.prevent="
             setDisplayNameScreen('bannerHomePageConfiguration');
             setFlagCmpOrEdit('create')">
          <base-button
            apperance="white"
            size="small">
            <i class="fa-solid fa-plus"></i>
          </base-button>
        </div>
      </div>
      <br />
      <draggable
        v-bind="dragOptions"
        v-model="bannerProduct">
        <div
          v-for="(banner, bannerIndex) in bannerProduct"
          style="display: flex; justify-content: space-between !important;height: 72px;"
          class="flex nowrap-xs col-xs-12 col-md-12 card-border-radius-tag middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-small-clean cursor-pointer rel">
          <div
            class="flex"
            style="max-width: inherit;width: 95%;"
            @click.prevent="
              setDisplayNameScreen('bannerHomePageConfiguration');
              getProductInformationById(banner.analyze_id);
              setFlagCmpOrEdit('edit');">

<!--            <div class="box-images-center">-->
<!--              <i class="fa fa-bars"></i>-->
<!--            </div>-->
            <div>
              <img width="40" height="40" :src="banner.thumb" />
            </div>
            <div class="max-width">
              <div>
                <span class="text-ellipsis text-bg text-small  col-xs-offset-1 text-dark-opacity visible-block">
                  {{ banner.banner_product_description[1].title }}
                </span>

                <div>
                  <span class="text-small text-sub-title full-width  text-ellipsis col-xs-offset-1 text-ellipsis">

                    {{ getLanguage('label_info') }}
                  </span>
                </div>
              </div>
            </div>
          </div>

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

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

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