<template>
  <modal
    name="banner-detail"
    :scrollable="true"
    height="auto"
    :no-close-on-backdrop="true"
    :header-bg-variant="null"
    @closed="$emit('closed')"
    @before-open="beforeOpenModal"
  >
    <b-row class="d-flex justify-content-between mb-2 mt-1">
      <b-col class="d-flex modal-text-color ml-2" cols="8">
        <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
          <font-awesome-icon icon="image" class="align-self-center" />
        </div>
        <div class="pt-1">
          <div class="inline-block akkurat-regular min-header-text">Banner</div>
          <div class="akkurat-bold max-header-text title">{{banner.title}}</div>
        </div>
      </b-col>
      <b-col class="d-flex justify-content-end mr-2 mt-1">
        <span class="close-icon" @click="closeModal">
          <font-awesome-icon icon="times" class="align-self-center" />
        </span>
      </b-col>
    </b-row>

    <b-form @submit.prevent="save" @reset.prevent="reset">
      <b-row class="m-2">
        <b-col cols="12" class="mb-2">
          <text-input required v-model="banner.title" title="Title" placeHolder="Digite o título" />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            required
            v-model="banner.description"
            title="Descrição"
            placeHolder="Digite a descrição"
          />
        </b-col>
<b-col cols="12" class="mb-2">
<label for="">Prioridade</label>
   <b-form-input class="radius-theme" required v-model="banner.priority" placeholder="Prioridade"></b-form-input>

          
        </b-col>

<b-col md='12'>

<search-campaign v-model="banner.campaign"  />
</b-col>

        <b-col cols="12" class="mb-2">
          <select-input
            title="Tipo"
            v-model="banner.type"
            :options="typeList"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <select-input
            title="Perfil"
            v-model="banner.role"
            :options="perfilList"
          />
        </b-col>


        <b-col cols="12" class="mb-2">
         
          <upload-image v-if='loadedImage' label="Imagem" v-model='banner.image_url' :fileInit="banner.image_url" @change="onImageChange" />
        </b-col>
      </b-row>
      <b-row class="justify-content-end">
        <b-col cols="3">
          <b-button variant="primary" type="submit">Salvar</b-button>
        </b-col>
        <b-col cols="3" class="mr-4 mb-3">
          <b-button type="reset">Cancelar</b-button>
        </b-col>
      </b-row>
    </b-form>
  </modal>
</template>
<script src="./banner-detail.js" lang="js" />
<style scoped lang="scss" src="./banner-detail.scss" />
