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

{% block content %}
  <div class="container-fluid">
    <aside-content v-if="!showNewCodeScreen && activeCode" :title="activeCode.title" size-height="medium">
      <template slot="asideHeader">
        <base-button @click.native="onPrimaryAdd" class="top-margin-large left-margin-large">
          { text_add }
        </base-button>
      </template>

      <template #aside>
        <div class="vertical-padding-large">
          <base-tabs :options="tabsCode" @click-tab="onClickTab" vertical></base-tabs>
        </div>
      </template>

      <div v-if="infoCode" class="flex flex-row flex-nowrap top-xs padding-small rounded-x-small background-info text-info bottom-margin-large">
        <i class="fas fa-info-circle text-medium padding-small"></i>
        <span class="flex-1 text-small padding-small" v-html="infoCode"></span>
      </div>
      <validation-provider
        tag="div"
        class="bottom-margin-large"
        :rules="{
          required: true,
          target_is_duplicated: {
            data: tracking_code,
            key: 'title',
          }
        }"
        :name=`tracking_code[${indexActiveCode}][title]`
        v-slot="{ errors, valid }">
        <base-input
          type="text"
          :name=`tracking_code[${indexActiveCode}][title]`
          :label="text_title"
          v-model="activeCode.title"
          required
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm">
        </base-input>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        rules="required"
        :name=`tracking_code[${indexActiveCode}][tag]`
        v-slot="{ errors, valid }">
        <base-select
          :name=`tracking_code[${indexActiveCode}][tag]`
          label="Tag"
          v-model="activeCode.tag"
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm">
            <option v-for="(value, key) in type_custom_tags" :key="key" :value="key">{ value }</option>
        </base-select>
      </validation-provider>

      <validation-provider
        tag="div"
        class="bottom-margin-large"
        rules="required"
        name=`tracking_code_snippet`
        v-slot="{ errors, valid }">
        <highlight-editor
          :label="textScript"
          class="bottom-margin-large"
          v-model="activeCode.script"
          required
          language="js"
          :error="errors[0]"
          :valid="valid"
        >
        </highlight-editor>
      </validation-provider>

      <base-checkbox
        label="Habilitar"
        :name=`tracking_code[${indexActiveCode}][status]`
        v-model="activeCode.status"
        value="1"
        unchecked-value="0"
        size="large"
        :disabled="disableForm">
      </base-checkbox>

      <hr class="top-border-gray" />

      <base-checkbox
        label="Código em todas as páginas"
        size="large"
        :name=`tracking_code[${indexActiveCode}][all_layouts]`
        v-model="activeCode.all_layouts"
        value="1"
        unchecked-value="0"
        :disabled="disableForm">
      </base-checkbox>

      <validation-provider
        v-show="activeCode.all_layouts == 0"
        tag="div"
        class="bottom-margin-large"
        rules="required"
        :name=`tracking_code[${indexActiveCode}][layout_id]`
        v-slot="{ errors, valid }">
        <base-select
          :name=`tracking_code[${indexActiveCode}][layout_id]`
          :label="text_layout"
          v-model="activeCode.layout_id"
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm">
            <option v-for="value in layouts" :key="value.layout_id" :value="value.layout_id">{ value.name }</option>
        </base-select>
      </validation-provider>

      <hr class="top-border-gray" />

      <div :key="updateComponent">
        <base-radio
          v-for="(value, key) in getPositions"
          :key="key"
          size="large"
          inline
          :label="value"
          :name=`tracking_code[${indexActiveCode}][position]`
          v-model="activeCode.position"
          :value="key"
          :disabled="disableForm">
        </base-radio>
      </div>

      <base-button
        apperance="error"
        @click.native="openModal()"
        :disabled="disableForm"
        class="top-margin-medium">
        Deletar
      </base-button>
    </aside-content>

    <base-card v-else>
      <div class="full-width padding-x-small bottom-border-gray" v-show="activeCode">
        <base-button
          @click.native="showNewCodeScreen = false"
          apperance="white"
          size="large"
          square>
          <i class="fas fa-times"></i>
        </base-button>
      </div>
      <div class="horizontal-padding-large vertical-padding-x-large flex flex-column middle-xs">
        <span class="text-x-large text-dark text-bold top-margin-x-large">Escolha um modelo para adicionar script ou meta tag personalizado</span>
        <div class="flex flex-row top-margin-large bottom-margin-x-large">
          <base-button
            @click.native="onAdd('Novo código')"
            apperance="outline"
            class="right-margin-small bottom-margin-small">
            Novo código
          </base-button>
          <base-button
            v-for="buttonPresetsItem in buttonPresets"
            :key="buttonPresetsItem"
            @click.native="onAdd(buttonPresetsItem)"
            apperance="outline"
            class="right-margin-small bottom-margin-small">
            {buttonPresetsItem}
          </base-button>
        </div>
      </div>
    </base-card>

      <base-modal
        v-show="showModal"
        size="medium"
        title="Deseja realmente excluir essa configuração?"
        :overlay="true"
        @close="onClose()">
        <div class="horizontal-padding-medium vertical-padding-medium text-center">
          <span v-text="'{{text_remove_config }}'"></span>
        </div>
        <div class="flex-center">
          <base-button
            type="submit"
            @click.native="onRemove(); onClose();"
            apperance="confirm"
            size="medium">
            <span>Confirmar</span>
          </base-button>
          <base-button
            @click.native="onClose()"
            apperance="cancel"
            class="left-margin-medium"
            size="medium" >
            <span>Cancelar</span>
          </base-button>
        </div>
      </base-modal>

  </div>
{% endblock %}