<template>
  <modal
    name="support-material-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">Material</div>
          <div class="akkurat-bold max-header-text title">{{record.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="record.title" title="Title" placeHolder="Digite o título" />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            v-model="record.description"
            title="Descrição"
            placeHolder="Digite a descrição"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <text-input
            title="Embed"
            v-model="record.embed"
            placeHolder="Digite um embed"
          />
        </b-col>

        <b-col cols="12" class="mb-2">
          <upload-image label="Anexo" :fileInit="record.attachment_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="./support-material-detail.js" lang="js" />
<style scoped lang="scss" src="./support-material-detail.scss" />
