{% extends 'base/module.twig' %}

{% block content %}

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        <base-card>
          <div v-if="displayAside == 'bannerList'">
            <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-medium">
              <span class="text-medium text-dark text-bold full-width text-ellipsis">{ heading_title }</span>
            </div>

            <div class="padding-medium">
              <div class="flex nowrap-xs middle-xs padding-medium shadow-small hover:shadow-large cursor-pointer rel">
                <div
                  class="full-width text-ellipsis"
                  @click.prevent="displayAside = 'bannerUpdateHomePage'"
                >
                  <span class="text-medium text-dark visible-block text-ellipsis">{ text_banner_home_page }</span>
                  <span class="text-small text-gray visible-block">{ banner_home_page.habilita_banner == 0 ? text_disable : text_enable }</span>
                </div>
              </div>

              <hr class="bottom-border-gray vertical-margin-medium">

              <div v-for="(item, index) in banners.filter((item) => !item.delete)" :key="index">
                <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                  <div class="full-width text-ellipsis" @click.prevent="onBannerUpdate(index)">
                    <span class="text-medium text-dark visible-block text-ellipsis">{ item.name }</span>
                    <span class="text-small text-gray visible-block">{ item.status == 0 ? text_disable : text_enable }</span>
                  </div>
                  <div class="left-margin-medium" data-tooltip="Excluir">
                    <base-button
                      @click.prevent.native="onRemoveBanner(index)"
                      apperance="white"
                      square
                      size="small"
                    >
                      <template #icon>
                        <i class="fas fa-trash"></i>
                      </template>
                    </base-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="padding-medium">
              <base-button
                @click.prevent.native="addNewBanner"
                apperance="primary"
                square
                full
                size="medium"
              >
                { text_new_banner }
              </base-button>
            </div>
          </div>

          <div v-if="displayAside == 'bannerUpdateHomePage'">
            <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small">
              <base-button
                @click.prevent.native="onClickBackHome"
                apperance="white"
                square
                size="small"
                class="right-margin-medium"
              >
                <template #icon>
                  <i class="fas fa-arrow-left"></i>
                </template>
              </base-button>
              <span class="text-medium text-dark text-bold full-width text-ellipsis">{ text_banner_home_page }</span>
              <div
                @click.prevent.stop="bannerContentImage = cloneObject(banner_home_page)"
              >
                <base-button
                  @click.prevent.native="displayAside = 'bannerHomePageConfig'"
                  apperance="white"
                  square
                  size="small"
                  class="left-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-cog"></i>
                  </template>
                </base-button>
              </div>
            </div>

            <div v-if="banner_home_page.tipo_configuracao == 1">
              <div class="padding-medium">
                <span class="text-small text-dark text-center visible-block">{ text_selected_layout }</span>
              </div>
            </div>

            <div v-else>
              <div class="padding-medium">
                <span class="text-gray text-small bottom-margin-small visible-block">Ordem</span>
                <draggable
                  v-model="banner_home_page.banner_group"
                  @start="drag=true"
                  @end="drag=false"
                  @change="updateBannerGroupOrder('banner_group')"
                >
                  <div
                    v-for="(bannerGroup, index) in banner_home_page.banner_group"
                    :key="index"
                  >
                    <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                      <div class="center-middle-absolute full-width full-height"></div>
                      <i class="fas fa-bars text-x-small text-gray right-margin-small" style="margin-left: -0.5rem;"></i>
                      <div class="full-width text-ellipsis">
                        <span class="text-medium text-dark visible-block text-ellipsis">{ bannerGroup.name }</span>
                      </div>
                    </div>
                  </div>
                </draggable>
              </div>

              <base-tabs class="top-margin-medium" @click-tab="onChangeHomePageTab" :options="bannerHomePageTab" full ></base-tabs>

              <div v-show="bannerHomePageTab[0].active">
                <div class="padding-medium">
                  <div v-if="banner_home_page.banner_image == false">
                    <span class="text-small text-dark text-center visible-block">{ text_add_images }</span>
                  </div>
                  <draggable
                    v-model="banner_home_page.banner_image"
                    @start="drag=true"
                    @end="drag=false"
                    @change="updateBannerOrder('banner_image')"
                  >
                    <div
                      v-for="(bannerImage, index) in banner_home_page.banner_image"
                      :key="index"
                      @click.prevent.stop="bannerContentImage = cloneObject(bannerImage)"
                    >
                      <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                        <div class="center-middle-absolute full-width full-height" @click.prevent="displayAside = 'bannerHomePageUpdateImage'"></div>
                        <i class="fas fa-bars text-x-small text-gray right-margin-small" style="margin-left: -0.5rem;"></i>
                        <div class="border-gray right-margin-medium">
                          <img :src="bannerImage.thumb ? bannerImage.thumb : bannerImage.image" width="40" height="40" class="visible-block">
                        </div>
                        <div class="full-width text-ellipsis">
                          <span class="text-medium text-dark visible-block text-ellipsis">{ bannerImage.banner_image_description[1].title }</span>
                        </div>
                        <div class="left-margin-medium" :data-tooltip="text_delete">
                          <base-button
                            @click.prevent.native="banner_home_page.banner_image = onRemove(banner_home_page.banner_image, index)"
                            apperance="white"
                            square
                            size="small"
                          >
                            <template #icon>
                              <i class="fas fa-trash"></i>
                            </template>
                          </base-button>
                        </div>
                      </div>
                    </div>
                  </draggable>
                </div>
                <div class="padding-medium">
                  <base-button
                    @click.prevent.native="onBannerUpdateImage('bannerHomePageUpdateImage')"
                    apperance="primary"
                    square
                    full
                    size="medium"
                  >
                    { button_add_image }
                  </base-button>
                  </div>
              </div>

              <div v-show="bannerHomePageTab[1].active">
                <div class="padding-medium">
                  <div v-if="banner_home_page.banner_product == false">
                    <span class="text-small text-dark text-center visible-block">{ text_add_products }</span>
                  </div>
                  <draggable
                    v-model="banner_home_page.banner_product"
                    @start="drag=true"
                    @end="drag=false"
                    @change="updateBannerOrder('banner_product')"
                  >
                    <div
                      v-for="(bannerProduct, index) in banner_home_page.banner_product"
                      :key="index"
                      @click.prevent.stop="bannerContentImage = cloneObject(bannerProduct)"
                    >
                      <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                        <div class="center-middle-absolute full-width full-height" @click.prevent="displayAside = 'bannerHomePageUpdateProduct'"></div>
                        <i class="fas fa-bars text-x-small text-gray right-margin-small" style="margin-left: -0.5rem;"></i>
                        <div class="border-gray right-margin-medium">
                          <img :src="bannerProduct.image" width="40" height="40" class="visible-block">
                        </div>
                        <div class="full-width text-ellipsis">
                          <span class="text-medium text-dark visible-block text-ellipsis">{ bannerProduct.banner_product_description[1].title }</span>
                        </div>
                        <div class="left-margin-medium" :data-tooltip="text_delete">
                          <base-button
                            @click.prevent.native="banner_home_page.banner_product = onRemove(banner_home_page.banner_product, index)"
                            apperance="white"
                            square
                            size="small"
                          >
                            <template #icon>
                              <i class="fas fa-trash"></i>
                            </template>
                          </base-button>
                        </div>
                      </div>
                    </div>
                  </draggable>
                </div>
                <div class="padding-medium">
                  <base-button
                    @click.prevent.native="onBannerUpdateProduct"
                    apperance="primary"
                    square
                    full
                    size="medium"
                  >
                    { button_add_product }
                  </base-button>
                  </div>
              </div>

              <div v-show="bannerHomePageTab[2].active">
                <div class="padding-medium">
                  <div v-if="banner_home_page.banner_dinamico == false">
                    <span class="text-small text-dark text-center visible-block">{ text_add_dinamics }</span>
                  </div>
                  <draggable
                    v-model="banner_home_page.banner_dinamico"
                    @start="drag=true"
                    @end="drag=false"
                    @change="updateBannerOrder('banner_dinamico')"
                  >
                    <div
                      v-for="(bannerDinamic, index) in banner_home_page.banner_dinamico"
                      :key="index"
                      @click.prevent.stop="bannerContentImage = cloneObject(bannerDinamic)"
                    >
                      <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                        <div class="center-middle-absolute full-width full-height" @click.prevent="displayAside = 'bannerHomePageUpdateDinamico'"></div>
                        <i class="fas fa-bars text-x-small text-gray right-margin-medium" style="margin-left: -0.5rem;"></i>
                        <div class="full-width text-ellipsis">
                          <span class="text-medium text-dark visible-block text-ellipsis">{ Type_ModulesListBanner[bannerDinamic.banner_dinamico_tipolista] }</span>
                        </div>
                        <div class="left-margin-medium" :data-tooltip="text_delete">
                          <base-button
                            @click.prevent.native="banner_home_page.banner_dinamico = onRemove(banner_home_page.banner_dinamico, index)"
                            apperance="white"
                            square
                            size="small"
                          >
                            <template #icon>
                              <i class="fas fa-trash"></i>
                            </template>
                          </base-button>
                        </div>
                      </div>
                    </div>
                  </draggable>
                </div>
                <div class="padding-medium">
                  <base-button
                    @click.prevent.native="onBannerUpdateDinamic"
                    apperance="primary"
                    square
                    full
                    size="medium"
                  >
                    { button_add_banner }
                  </base-button>
                  </div>
              </div>
            </div>

          </div>

          <div v-if="displayAside == 'bannerHomePageConfig'">
            <validation-observer
              tag="div"
              ref="validationBannerHomePageConfig"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small">
                <base-button
                  @click.prevent.native.stop="onClickCancel('bannerUpdateHomePage')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">{ text_banner_home_page }</span>
                <div>
                  <base-button
                    @click.prevent.native="onClickBack(validate, 'bannerUpdateHomePage', () => banner_home_page = bannerContentImage)"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium" style="overflow: auto; height: calc(100vh - 280px);">

                <validation-provider
                  tag="div"
                  rules="required"
                  name="habilita_banner"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="habilita_banner"
                    :label="label_status"
                    v-model="bannerContentImage.habilita_banner"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="tipo_configuracao"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="tipo_configuracao"
                    :label="label_configuration_type"
                    v-model="bannerContentImage.tipo_configuracao"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_AdvancedOrSimple"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_rotativo"
                  v-if="bannerContentImage.tipo_configuracao == 1"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="banner_rotativo"
                    :label="label_layout"
                    v-model="bannerContentImage.banner_rotativo"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="banner in banners"
                      :key="banner.banner_id"
                      :value="banner.banner_id"
                    >
                      { banner.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="tipo_banner"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="tipo_banner"
                    :label="label_banner_type"
                    v-model="bannerContentImage.tipo_banner"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_Screen"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentImage.tipo_banner == 0"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="tipo_posicionamento"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="tipo_posicionamento"
                    :label="label_position_type"
                    v-model="bannerContentImage.tipo_posicionamento"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ScreenPosition"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="hide_responsive"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="hide_responsive"
                    :label="label_hyde_responsive"
                    v-model="bannerContentImage.hide_responsive"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_DsimDnao"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_time"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="banner_time"
                    :label="label_exibition_time"
                    v-model="bannerContentImage.banner_time"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ScreenTime"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required|minmax_number:0,1920"
                  name="banner_largura"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_largura"
                    :label="label_width_large"
                    v-model="bannerContentImage.banner_largura"
                    mask="number"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required|minmax_number:0,1920"
                  name="banner_altura"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_altura"
                    :label="label_height_large"
                    v-model="bannerContentImage.banner_altura"
                    mask="number"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required|minmax_number:0,1920"
                  name="banner_responsive_largura"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_responsive_largura"
                    :label="label_width_small"
                    v-model="bannerContentImage.banner_responsive_largura"
                    mask="number"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required|minmax_number:0,1920"
                  name="banner_responsive_altura"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_responsive_altura"
                    :label="label_height_small"
                    v-model="bannerContentImage.banner_responsive_altura"
                    mask="number"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerHomePageUpdateImage'">
            <validation-observer
              tag="div"
              ref="validationBannerHomePageUpdateImage"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small visible-overflow">
                <base-button
                  @click.prevent.native.stop="onClickCancel('bannerUpdateHomePage')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">
                  { bannerContentImage.banner_image_description && bannerContentImage.banner_image_description[1].title ? bannerContentImage.banner_image_description[1].title : text_new_banner }
                </span>
                <div>
                  <base-button
                    @click.prevent.native="
                      bannerContentImage.new == true ?
                      onClickBack(validate, 'bannerUpdateHomePage', () => onBannerAddItem(banner_home_page.banner_image, 'banner_image')) :
                      onClickBack(validate, 'bannerUpdateHomePage', () => banner_home_page.banner_image[bannerContentImage.banner_order] = bannerContentImage)"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium" style="overflow: auto; height: calc(100vh - 280px);">
                <base-input-file
                  class="bottom-margin-large"
                  :label="text_image_big_screens"
                  :thumbnail="bannerContentImage.thumb"
                  :error="imageError['image'] && imageError['image'][0] ? imageError['image'][0] : ''"
                  @change="(value) => {onCloseFileManagerBannerHomePageImage(value); imageError = {};}"
                >
                </base-input-file>

                <base-input-file
                  class="bottom-margin-large"
                  :label="text_image_small_screens"
                  :thumbnail="bannerContentImage.thumb_responsive"
                  @change="onCloseFileManagerBannerHomePageImageResponsive"
                >
                </base-input-file>

                <validation-provider
                  v-if="bannerContentImage.banner_image_description"
                  tag="div"
                  class=""
                  rules="required"
                  name="banner_image_description[1][title]"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_image_description[1][title]"
                    :label="label_title"
                    v-model="bannerContentImage.banner_image_description[1].title"
                    mask=""
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules=""
                  name="link"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="link"
                    :label="label_link"
                    v-model="bannerContentImage.link"
                    mask=""
                    :error="errors[0]"
                    :valid="valid"
                  >
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="target"
                  v-slot="{ errors, valid }"
                >
                  <base-select
                    name="target"
                    :label="label_open_link"
                    v-model="bannerContentImage.target"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_OpenLink"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <hr class="bottom-border-gray vertical-margin-large">

                <span class="text-gray text-x-small bottom-padding-small visible-block">{ text_advanced_setting }</span>

                <base-input
                  class="top-padding-large"
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  mask="date"
                  name="date_initial"
                  :label="label_initial_date"
                  v-model="bannerContentImage.date_initial"
                  mask="date"
                >
                </base-input>

                <base-input
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  mask="date"
                  name="date_end"
                  :label="label_final_date"
                  v-model="bannerContentImage.date_end"
                  mask="date"
                >
                </base-input>

                <base-checkbox
                  class="top-padding-large"
                  type="text"
                  name="analyze"
                  :label="label_follow_click"
                  v-model="bannerContentImage.analyze"
                  mask=""
                  value="1"
                  unchecked-value="0"
                >
                </base-checkbox>

                <base-input
                  class="hidden"
                  type="text"
                  name="analyze_id"
                  v-model="bannerContentImage.analyze_id"
                  mask=""
                >
                </base-input>

                <base-input
                  v-if="bannerContentImage.analyze == 1"
                  class=""
                  type="text"
                  name="quantity"
                  :label="label_quantity"
                  v-model="bannerContentImage.analyze_quantity"
                  disabled
                >
                </base-input>

              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerHomePageUpdateProduct'">
            <validation-observer
              tag="div"
              ref="validationBannerHomePageUpdateProduct"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small visible-overflow">
                <base-button
                  @click.prevent.native="onClickCancel('bannerUpdateHomePage')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">
                  { bannerContentImage.banner_product_description && bannerContentImage.banner_product_description[1].title ? bannerContentImage.banner_product_description[1].title : text_new_banner }
                </span>
                <div>
                  <base-button
                    @click.prevent.native="
                      bannerContentImage.new == true ?
                      onClickBack(validate, 'bannerUpdateHomePage', () => onBannerAddItem(banner_home_page.banner_product, 'banner_product')) :
                      onClickBack(validate, 'bannerUpdateHomePage', () => banner_home_page.banner_product[bannerContentImage.banner_order] = bannerContentImage)"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium" style="overflow: auto; height: calc(100vh - 280px);">

                <img :src="bannerContentImage.image" width="40" height="40" class="visible-block">

                <validation-provider
                  v-if="bannerContentImage.banner_product_description"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_product_description[1][title]"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_product_description[1][title]"
                    :label="label_description"
                    v-model="bannerContentImage.banner_product_description[1].title"
                    placeholder="Buscar produto"
                    readonly
                    @click.prevent="onToggleSearchProduct"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <search-product
                  :open="openSearchProduct"
                  :single-select="true"
                  @close="onToggleSearchProduct"
                  @products-selected="onProductsSelected">
                </search-product>

                <validation-provider
                  tag="div"
                  class="top-margin-large disabled"
                  rules=""
                  name="product_id"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="product_id"
                    :label="label_code"
                    readonly
                    v-model="bannerContentImage.product_id"
                    mask="number"
                  >
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_model"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="banner_model"
                    :label="label_model"
                    v-model="bannerContentImage.banner_model"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ModelBannerProduct"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <hr class="bottom-border-gray vertical-margin-large">

                <span class="text-gray text-x-small bottom-padding-small visible-block">{ text_advanced_setting }</span>

                <base-input
                  class="top-padding-large"
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  name="date_initial"
                  :label="label_initial_date"
                  v-model="bannerContentImage.date_initial"
                  mask="date"
                >
                </base-input>

                <base-input
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  name="date_end"
                  :label="label_final_date"
                  v-model="bannerContentImage.date_end"
                  mask="date"
                >
                </base-input>

                <base-checkbox
                  class="top-padding-large"
                  type="text"
                  name="analyze"
                  :label="label_follow_click"
                  v-model="bannerContentImage.analyze"
                  mask=""
                  value="1"
                >
                </base-checkbox>

                <base-input
                  class="hidden"
                  type="text"
                  name="analyze_id"
                  v-model="bannerContentImage.analyze_id"
                  mask=""
                >
                </base-input>

                <base-input
                  v-if="bannerContentImage.analyze"
                  class=""
                  type="text"
                  name="quantity"
                  :label="label_quantity"
                  v-model="bannerContentImage.analyze_quantity"
                  disabled
                >
                </base-input>

              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerHomePageUpdateDinamico'">
            <validation-observer
              tag="div"
              ref="validationBannerHomePageUpdateDinamico"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small visible-overflow">
                <base-button
                  @click.prevent.native="onClickCancel('bannerUpdateHomePage')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">
                  { Type_ModulesListBanner[bannerContentImage.banner_dinamico_tipolista] ? Type_ModulesListBanner[bannerContentImage.banner_dinamico_tipolista] : text_new_banner }
                </span>
                <div>
                  <base-button
                    @click.prevent.native="
                      bannerContentImage.new == true ?
                      onClickBack(validate, 'bannerUpdateHomePage', () => onBannerAddItem(banner_home_page.banner_dinamico, 'banner_dinamico')) :
                      onClickBack(validate, 'bannerUpdateHomePage', () => banner_home_page.banner_dinamico[bannerContentImage.banner_dinamico_ordem] = bannerContentImage)"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium">

                <validation-provider
                  tag="div"
                  rules="required"
                  name="banner_dinamico_tipolista"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="banner_dinamico_tipolista"
                    :label="label_list_type"
                    v-model="bannerContentImage.banner_dinamico_tipolista"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ModulesListBanner"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_dinamico_quantidade"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_dinamico_quantidade"
                    :label="label_quantity"
                    v-model="bannerContentImage.banner_dinamico_quantidade"
                    mask="number"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="banner_dinamico_model"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="banner_dinamico_model"
                    :label="label_model"
                    v-model="bannerContentImage.banner_dinamico_model"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ModelBannerProduct"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <base-input
                  class="top-margin-large"
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  name="banner_dinamico_date_initial"
                  :label="label_initial_date"
                  v-model="bannerContentImage.banner_dinamico_date_initial"
                  mask="date"
                >
                </base-input>

                <base-input
                  class="top-margin-large"
                  format="DD/MM/YYYY"
                  type="date"
                  value-type="format"
                  name="banner_dinamico_date_end"
                  :label="label_final_date"
                  v-model="bannerContentImage.banner_dinamico_date_end"
                  mask="date"
                >
                </base-input>


              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerUpdate'">
            <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small">
              <base-button
                @click.prevent.native="onClickBackHome"
                apperance="white"
                square
                size="small"
                class="right-margin-medium"
              >
                <template #icon>
                  <i class="fas fa-arrow-left"></i>
                </template>
              </base-button>
              <span class="text-medium text-dark text-bold full-width text-ellipsis">{ bannerContent.name }</span>
              <base-button
                @click.prevent.native="displayAside = 'bannerConfig'"
                apperance="white"
                square
                size="small"
                class="left-margin-medium"
              >
                <template #icon>
                  <i class="fas fa-cog"></i>
                </template>
              </base-button>
            </div>

            <base-tabs @click-tab="onChangeTab" :options="bannerContentTab" full ></base-tabs>

            <div v-show="bannerContentTab[0].active">
              <div class="padding-medium">
                <div v-if="bannerContent.banner_image == false">
                  <span class="text-small text-dark text-center visible-block">{ text_add_images }</span>
                </div>
                <draggable
                  v-model="bannerContent.banner_image"
                  @start="drag=true"
                  @end="drag=false"
                >
                  <div
                    v-for="(bannerImage, index) in bannerContent.banner_image"
                    :key="index"
                    @click.prevent.stop="bannerImage.index = index; bannerContentImage = cloneObject(bannerImage)"
                  >
                    <div class="flex nowrap-xs middle-xs padding-medium bottom-margin-small shadow-small hover:shadow-large cursor-pointer rel">
                      <div class="center-middle-absolute full-width full-height" @click.prevent="displayAside = 'bannerUpdateImage'"></div>
                      <i class="fas fa-bars text-x-small text-gray right-margin-small" style="margin-left: -0.5rem;"></i>
                      <div class="border-gray right-margin-medium">
                        <img :src="bannerImage.thumb" width="40" height="40" class="visible-block">
                      </div>
                      <div class="full-width text-ellipsis">
                        <span class="text-medium text-dark visible-block text-ellipsis">{ bannerImage.banner_image_description[1].title }</span>
                      </div>
                      <div class="left-margin-medium" :data-tooltip="text_delete">
                        <base-button
                          @click.prevent.native="bannerContent.banner_image = onRemove(bannerContent.banner_image, index)"
                          apperance="white"
                          square
                          size="small"
                        >
                          <template #icon>
                            <i class="fas fa-trash"></i>
                          </template>
                        </base-button>
                      </div>
                    </div>
                  </div>
                </draggable>
              </div>
              <div class="padding-medium">
                <base-button
                  @click.prevent.native="onBannerUpdateImage('bannerUpdateImage')"
                  apperance="primary"
                  square
                  full
                  size="medium"
                >
                  { button_add_image }
                </base-button>
                </div>
            </div>

            <div v-show="bannerContentTab[1].active">
              <div class="padding-medium">
                <div>
                  <div v-for="(bannerStyle, key) in configurations" :key="key">
                    <span class="text-gray text-small bottom-margin-small visible-block">{ language['text_' + key] }</span>
                    <div
                      v-for="(bannerItem, index) in bannerStyle"
                      :key="index"
                    >
                      <base-card
                        v-if="bannerItem.banner_id == bannerContent.banner_id"
                        hover
                        class="flex nowrap-xs middle-xs padding-medium bottom-margin-small rel"
                      >
                        <div
                          class="full-width text-ellipsis"
                          @click.prevent.stop="bannerItem.index = index; onBannerUpdateLayout(bannerItem, index, bannerItem.style)"
                        >
                          <span
                            v-for="(layout, index) in layouts"
                            :key="index"
                            class="text-medium text-dark visible-block text-ellipsis"
                          >
                              { layout.layout_id == bannerItem.layout_id ? layout.name : '' }
                          </span>
                          <span class="text-small text-gray visible-block">{ bannerItem.status == 1 ? text_enable : text_disable }</span>
                        </div>
                        <div class="left-margin-medium" :data-tooltip="text_delete">
                          <base-button
                            @click.prevent.native="onRemoveBannerLayout(key, index)"
                            apperance="white"
                            square
                            size="small"
                          >
                            <template #icon>
                              <i class="fas fa-trash"></i>
                            </template>
                          </base-button>
                        </div>
                      </base-card>
                    </div>
                  </div>
                </div>
              </div>
              <div class="padding-medium">
                <base-button
                  @click.prevent.native="onBannerUpdateLayout()"
                  apperance="primary"
                  square
                  full
                  size="medium"
                >
                  { text_new_layout }
                </base-button>
              </div>
            </div>
          </div>

          <div v-if="displayAside == 'bannerConfig'">
            <validation-observer
              tag="div"
              ref="validationBannerConfig"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small">
                <base-button
                  @click.prevent.native="onClickCancel('bannerList')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">{ bannerContent.name }</span>
                <div>
                  <base-button
                    @click.prevent.native="
                      isUuid(bannerContent.banner_id) ?
                      onClickBack(validate, 'bannerUpdate', () => addBanner()) :
                      onClickBack(validate, 'bannerUpdate', () => banners[bannerContent.index] = bannerContent)"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium">

                <validation-provider
                  tag="div"
                  class=""
                  rules="required"
                  name="name"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="name"
                    :label="label_name"
                    v-model="bannerContent.name"
                    mask=""
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="status"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="status"
                    :label="label_status"
                    v-model="bannerContent.status"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerUpdateImage'">
            <validation-observer
              tag="div"
              ref="validationBannerUpdateImage"
              v-slot="{ handleSubmit, validate }"
            >
              <div class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small visible-overflow">
                <base-button
                  @click.prevent.native="onClickCancel('bannerUpdate')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">
                  { bannerContentImage.banner_image_description && bannerContentImage.banner_image_description[1].title ? bannerContentImage.banner_image_description[1].title : text_new_image }
                </span>
                <div>
                  <base-button
                    @click.prevent.native="
                      bannerContentImage.new == true ?
                      onClickBack(validate, 'bannerUpdate', () => onBannerAddItem(bannerContent.banner_image)) :
                      onClickBack(validate, 'bannerUpdate', () => setBannerImage())"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium">
                <base-input-file
                  class="bottom-margin-large"
                  :thumbnail="bannerContentImage.thumb"
                  :error="imageError['image'] && imageError['image'][0] ? imageError['image'][0] : ''"
                  @change="(value) => {onCloseFileManager(value); imageError = {};}"
                >
                </base-input-file>

                <validation-provider
                  v-if="bannerContentImage.banner_image_description"
                  tag="div"
                  class=""
                  rules="required"
                  name="banner_image_description[1][title]"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="banner_image_description[1][title]"
                    :label="label_description"
                    v-model="bannerContentImage.banner_image_description[1].title"
                    mask=""
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules=""
                  name="link"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="link"
                    :label="label_link"
                    v-model="bannerContentImage.link"
                    mask=""
                  >
                  </base-input>
                </validation-provider>

              </div>
            </validation-observer>
          </div>

          <div v-if="displayAside == 'bannerUpdateLayout'">
            <validation-observer
              tag="div"
              ref="validationBannerUpdateLayout"
              v-slot="{ handleSubmit, validate }"
            >
              <div v-show="bannerContentLayout.length != 0" class="flex middle-xs nowrap-xs bottom-border-gray text-ellipsis padding-small visible-overflow">
                <base-button
                  {# @click.prevent.native="onClickBack(validate, 'bannerUpdate', () => onClickBackLayout(bannerContentLayout.style))" #}
                  @click.prevent.native="onClickCancel('bannerUpdate')"
                  apperance="white"
                  square
                  size="small"
                  class="right-margin-medium"
                >
                  <template #icon>
                    <i class="fas fa-arrow-left"></i>
                  </template>
                </base-button>
                <span class="text-medium text-dark text-bold full-width text-ellipsis">
                  { bannerContent.name } : { bannerContentLayout.new == true ? text_new_layout : layoutName }
                </span>
                <div>
                  <base-button
                    @click.prevent.native="onClickBack(validate, 'bannerUpdate', () => onClickBackLayout(bannerContentLayout.style))"
                    apperance="white"
                    square
                    size="small"
                    class="left-margin-medium"
                  >
                    <span class="text-primary">
                      { button_apply }
                    </span>
                  </base-button>
                </div>
              </div>
              <div class="padding-medium" style="overflow: auto; height: calc(100vh - 280px);">

                <validation-provider
                  tag="div"
                  rules="required"
                  name="style"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="style"
                    :label="label_style"
                    v-model="bannerContentLayout.style"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option value="banners">{ text_banners }</option>
                    <option value="carousels">{ text_carousels }</option>
                    <option value="mosaics">{ text_mosaics }</option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="layout_id"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="layout_id"
                    :label="label_layout"
                    v-model="bannerContentLayout.layout_id"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(layout, index) in layouts"
                      :key="index"
                      :value="layout.layout_id"
                    >
                      { layout.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentLayout.layout_id == Type_IdLayout.Tp_Idcategory"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="category_id"
                  v-slot="{ errors, valid }">
                  <base-select-search
                    name="category_id"
                    :label="label_category"
                    type="date"
                    @callback="selectReturn"
                    :value="bannerContentLayout.category_id"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                    :option="categories"
                  >
                  </base-select-search>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentLayout.layout_id == Type_IdLayout.Tp_Idcategory && bannerContentLayout.category_id != -1"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="show_in_subsequent_categories"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="category_id"
                    :label="label_show_in_subsequent_categories"
                    v-model="bannerContentLayout.show_in_subsequent_categories"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_DsimDnao"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="status"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="status"
                    :label="label_status"
                    v-model="bannerContentLayout.status"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <hr class="bottom-border-gray vertical-margin-large">

                <validation-provider
                  v-if="bannerContentLayout.style == 'carousels'"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="scroll"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="scroll"
                    :label="label_scroll"
                    v-model="bannerContentLayout.scroll"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_AutoOrManual"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <div class="flex center-xs bottom-margin-medium" v-if="bannerContentLayout.style == 'mosaics'">
                  <div
                    v-for="(mosaic, index) in mosaic_styles"
                    :key="index"
                    class="padding-small cursor-pointer"
                    :class="{'background-gray': mosaic.type == bannerContentLayout.mosaic_style}"
                    @click.prevent="onSelectMosaic(mosaic.type)"
                  >
                    <img :src="mosaic.image" class="visible-block">
                  </div>
                </div>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="position"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="position"
                    :label="label_position"
                    v-model="bannerContentLayout.position"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm"
                  >
                    <option
                      v-for="(value, key) in Type_ModulePosition"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentLayout.style != 'mosaics'"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="width"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="width"
                    :label="label_width"
                    v-model="bannerContentLayout.width"
                    mask="positiveInteger"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentLayout.style != 'mosaics'"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="height"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="height"
                    :label="label_height"
                    v-model="bannerContentLayout.height"
                    mask="positiveInteger"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  v-if="bannerContentLayout.style == 'mosaics'"
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="min_size"
                  v-slot="{ errors, valid }"
                  class="top-margin-large"
                >
                  <base-input
                    type="text"
                    name="min_size"
                    :label="label_min_size"
                    v-model="bannerContentLayout.min_size"
                    mask="positiveInteger"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="fullScreen"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="fullScreen"
                    :label="label_full_screen"
                    v-model="bannerContentLayout.type"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    <option
                      v-for="(value, key) in Type_DsimDnao"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="tamanho"
                  v-slot="{ errors, valid }">
                  <base-select
                    name="tamanho"
                    :label="label_space"
                    v-model="bannerContentLayout.tamanho"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    <option
                      v-for="(value, key) in Type_Tamanho"
                      :key="key"
                      :value="key"
                    >
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  rules="required"
                  name="sort_order"
                  v-slot="{ errors, valid }"
                >
                  <base-input
                    type="text"
                    name="sort_order"
                    :label="label_sort_order"
                    v-model="bannerContentLayout.sort_order"
                    mask="positiveInteger"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

              </div>
            </validation-observer>
          </div>

        </base-card>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box">
          <div class="background-white border-gray padding-large bottom-margin-medium text-center" v-show="bannerContentLayout.banner_id">
            <span class="text-medium text-dark visible-block">{ text_organize_images }</span>
          </div>
          <draggable
            v-model="bannerContent.banner_image"
            @start="drag=true"
            @end="drag=false"
            v-show="bannerContentLayout.style == 'banners' || bannerContentLayout.style == 'carousels'"
            class="flex"
          >
            <div
              class="rel padding-x-small"
              draggable="true"
              v-for="(bannerImage, index) in bannerContent.banner_image"
              :key="index"
              :data-index="index"
            >
              <div
                class="flex center-xs middle-xs background-white"
                :style="{ width: bannerContentLayout.width + 'px', height: bannerContentLayout.height + 'px' }"
              >
                <img class="visible-block" :src=`../image/${bannerImage.image}` style="max-width: 100%; max-height: 100%;">
              </div>
            </div>
          </draggable>
          <banners-mosaic>
          </banners-mosaic>
          <draggable
            v-model="bannerContent.banner_image"
            @start="drag=true"
            @end="drag=false"
            v-show="bannerContentLayout.style == 'mosaics'"
            :class="'mosaic mosaic--' + bannerContentLayout.mosaic_style + ' mosaic--space-' + bannerContentLayout.tamanho + ''"
          >
            <div
              :class="'mosaic__item mosaic__item--space-' + bannerContentLayout.tamanho + ''"
              draggable="true"
              v-for="(bannerImage, index) in bannerContent.banner_image"
              :key="index"
              :style="{ 'background-image': 'url(../image/' + bannerImage.image + ')' }"
            >
            </div>
          </draggable>
        </div>
      </div>
    </div>
  </div>

{% endblock %}

