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

{% block content %}
  <div class="container-fluid">

      <div class="field field-medium"> 
			<base-manual title="{{text_info}}">
				<div>{{text_manual}}</div>
			</base-manual>
	</div>
    
    <base-card
      class="padding-large bottom-margin-large">
      <div class="row small-space-xs bottom-xs">
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          name='product_who_saw_title'
          rules="required"
          v-slot="{ errors, valid }">
          <base-input
            :label="text_title"
            name='product_who_saw_title'
            v-model="configurations.product_who_saw_title"
            :required="true"
            mask="alphanumeric"
            :valid="valid"
            :error="errors[0]"
            maxlength="70"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          name='product_who_saw_subtitle'
          v-slot="{ errors, valid }">
          <base-input
            :label="text_subtitle"
            name='product_who_saw_subtitle'
            v-model="configurations.product_who_saw_subtitle"
            mask="alphanumeric"
            :valid="valid"
            :error="errors[0]"
            maxlength="100"
            :disabled="disableForm">
          </base-input>
        </validation-provider>
      </div>
    </base-card>

    <div class="flex between-xs middle-xs bottom-padding-large">
      <span class="text-x-large text-dark">{{ text_module }}</span>
      <base-button
        class="btn-default btn-medium btn-primary"
        :loading="loadingBtn"
        @click.native="() => onAddModule()">
        {button_add_module}
      </base-button>
    </div>

    <base-card
      v-if="configurations.product_who_saw_module.length"
      v-for="(module, moduleIndex) in configurations.product_who_saw_module"
      :key="moduleIndex"
      class="padding-large bottom-margin-small">
      <div class="row small-space-xs bottom-xs">
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`product_who_saw_module[${moduleIndex}][position]`
          :rules="{
              required: true,
              module_is_duplicated: {
                  data: configurations.product_who_saw_module,
                  index: moduleIndex
              }
          }"
          v-slot="{ errors, valid }">
          <base-select
            :name=`product_who_saw_module[${moduleIndex}][position]`
            :label="entry_position"
            v-model="module.position"
            :error="errors[0]"
            :valid="valid"
            :disabled="disableForm">
            <option
              v-for="(value, key) in Type_ModulePosition.getRemoveArray([Type_ModulePosition.Tp_ColumnLeft], true)"
              :value="key">{ value }
            </option>
          </base-select>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-md-auto"
          :name=`product_who_saw_module[${moduleIndex}][limit]`
          rules="required"
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_limit"
            :name=`product_who_saw_module[${moduleIndex}][limit]`
            v-model="module.limit"
            :required="true"
            mask="positiveInteger"
            maxlength="2"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`product_who_saw_module[${moduleIndex}][status]`
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :name=`product_who_saw_module[${moduleIndex}][status]`
            :label="entry_status"
            v-model="module.status"
            :valid="valid"
            :disabled="disableForm">
            <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
          </base-select>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-md-auto"
          :name=`product_who_saw_module[${moduleIndex}][sort_order]`
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_sort_order"
            :name=`product_who_saw_module[${moduleIndex}][sort_order]`
            mask="positiveInteger"
            v-model="module.sort_order"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm"
            maxlength="2">
          </base-input>
        </validation-provider>

        <div class="col-xs-12 col-md-width-auto" title="Remover">
          <base-button
            apperance="outline"
            square
            @click.native="() => onRemoveModule(moduleIndex)">
            <i class="fas fa-trash"></i>
          </base-button>
        </div>

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