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

{% block content %}
    <div class="container-fluid">
  <div class="row">
    <div class="col-xs-8">
      <div class="content-box">
        <wireframe-footer 
          :colors="configurations" 
          :first_column_is_custom="firstColumnCustom" 
          :contact_is_custom="contactCustom" 
          :container_is_custom="customContainer"
          :show_contact="showContact"
          :show_icons_payment="showIconsPayment"
          :show_payment_auto_flag="showPaymentAutoFlag"
          :social_midia_is_custom="socialMidiaIsCustom"
          :show_certificate_content="showCertificateContent"
          :show_custom_certificate="showCustomCertificate"
          :show_manufacture_link="showLinkManufacture"
          :show_devolution_link="showLinkDevolution"
        />
      </div>
    </div>
    <div class="col-xs-4">
      <div class="content-box bottom-margin-medium">
        <base-card>
          <div class="vertical-padding-small">
            <div class="padding-medium">
              <validation-provider
              tag="div"
              :name="'footer_model_able'"
              :rules="'required'"
              v-slot="{ errors, valid }">
                <base-select
                  :name="'footer_model_able'"
                  :label="entry_model_able"
                  v-model="configurations.module.footer_model_able"
                  :valid="valid"
                  :readonly="ableToChangeFooterModel"
                  @change="changeFooterModel($event)"
                  :error="errors[0]">
                  <option
                    v-for="(value, key) in Type_Footer.getEnumList()"
                    :value="key">{ value }
                  </option>
                </base-select>
              </validation-provider>
            </div>
          </div>
        </base-card>
      </div>
      <div class="content-box">
        <base-card>
            {# <div v-show="Object.keys(selectedOption).length === 0 && Object.keys(selectedItem).length === 0" class="vertical-padding-small">
              <div
                v-for="(option, index) in options"
                class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray"
                @click="selectedOption = option"
                :key="index">
                <span class="text-medium text-dark text-bold">{option.title}</span>
                <i class="fas fa-chevron-right"></i>
              </div>
            </div> #}

            <div v-show="Object.keys(selectedOption).length > 0 && Object.keys(selectedItem).length === 0">
              <div class="flex flex-row middle-xs bottom-border-gray vertical-padding-large horizontal-padding-medium">
                <span class="text-medium text-dark text-bold left-margin-x-small">Rodapé {selectedOption.title}</span>
              </div>
              <div class="vertical-padding-small">
                <div
                  v-for="(item, index) in selectedOption.itens"
                  class="flex flex-row between-xs middle-xs text-medium text-dark padding-medium cursor-pointer hover:background-gray"
                  @click="selectedItem = item;"
                  :key="index">
                  <span class="text-medium text-dark text-bold">{item.group}</span>
                  <i class="fas fa-chevron-right"></i>
                </div>
              </div>
            </div>


            <div v-show="Object.keys(selectedItem).length > 0">
              <div class="flex flex-row middle-xs bottom-border-gray padding-small">
                <base-button
                  apperance="white"
                  square
                  @click.native="selectedItem = {}">
                  <i class="fas fa-arrow-left"></i>
                </base-button>
                <span class="text-medium text-dark text-bold left-margin-x-small">Voltar</span>
              </div>
              <div class="vertical-padding-medium">
                  <validation-provider 
                    tag="div" 
                    v-for="(field, index) in selectedItem.fields"
                    :class="index == 0 ? 
                      'flex flex-col text-medium text-dark horizontal-padding-medium' : 
                      'flex flex-col text-medium text-dark horizontal-padding-medium top-margin-medium'" 
                    :key="index" 
                    :name="field.name" 
                    :rules="field.rules" 
                    v-show="showFields[field.name]"
                    v-slot="{ errors, valid }"
                  >
                    <div v-if="['text'].includes(field.type)">
                      <base-input
                        class="flex"
                        type="field.type"
                        :name="field.name"
                        :ref="field.name" 
                        :description="field.description"
                        :id="field.name"
                        :label="field.label" 
                        :mask="field.mask" 
                        :valid="valid" 
                        :error="errors[0]" 
                        :disabled="disableForm" 
                        :readonly="field.readonly"
                        v-model="configurations.module[field.name]">
                      </base-input>
                    </div>
                    <div v-else-if="['select'].includes(field.type)">
                      <base-select 
                        :name="field.name" 
                        :id="field.name" 
                        :label="field.label" 
                        :ref="field.name" 
                        :description="field.description" 
                        :valid="valid" 
                        :error="errors[0]" 
                        :disabled="disableForm" 
                        :readonly="field.readonly"
                        v-model="configurations.module[field.name]"
                      >
                        <option v-for="(value, key) in  getTypeEnumList(`${field.name}`, `${field.options}`, `${field.customOptions}`)  " :value="key">
                          { value }
                        </option>
                      </base-select>
									  </div>

                    <div v-else-if="['ckeditor'].includes(field.type)">
                      <label class="field field-medium" :ref="field.name">
                        <span v-text="field.label" class="field-label"></span>
                        <span class="field-description" v-text="field.description"></span>
                        <div :class="errors[0] ? 'error-ckeditor-border' : ''">
                          <textarea :name="field.name" :id="field.name + '_editor'"></textarea>
                        </div>
                        <span class="error-ckeditor top-margin-medium" v-text="errors[0]"></span>
                      </label>
									  </div>

                    <div v-else-if="['color'].includes(field.type)">
										  <base-input 
                        :key="field.name" 
                        :type="field.type" 
                        :name="field.name" 
                        :class="field.name" 
                        :ref="field.name" 
                        :id="field.name" 
                        :label="field.label" 
                        :mask="field.mask" 
                        :valid="valid" 
                        :error="errors[0]" 
                        :disabled="disableForm"
                        @input="setPreviewColors(field.name)" 
                        v-model="configurations.module[field.name]"
                      >
                      </base-input>
									  </div>

                  </validation-provider>
                </div>
              </div>
            </div>
        </base-card>
      </div>
    </div>
  </div>
</div>
{% endblock %}