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

{% block content %}
  <div class="container-fluid">
    <div class="flex end-md bottom-padding-large">
      <button type="button" class="btn-default btn-medium btn-primary" @click="addModule">
        <span>{{ button_add_module }}</span>
      </button>
    </div>

    <base-card
      v-for="(category, index) in configurations.category_module"
      :key="index"
      class="bottom-margin-medium">
      <div class="row x-small-space-xs padding-large">

        <div class="col-xs-12 col-md">
          <validation-provider
            tag="div"
            rules="required"
            mode="passive"
            :name=`category_module[${index}]layout_id`
            v-slot="{ errors, valid }">
            <base-select
              :name=`category_module[${index}]layout_id`
              :label="entry_layout"
              v-model="configurations.category_module[index].layout_id"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
              @change="() => {filterSubCategory(index); duplicatedItem(index);}"
            >
              <option
                v-for="(layout, index) in layouts"
                :key="index"
                :value="layout.layout_id"
              >
                { layout.name }
              </option>
            </base-select>
          </validation-provider>
          <base-checkbox
            v-if="category.layout_id == Type_IdLayout.Tp_Idcategory || category.layout_id == Type_IdLayout.Tp_IdSearch"
            class="top-padding-medium"
            type="checkbox"
            name="filtersubcategory"
            :label="entry_subcategory"
            v-model="category.filtersubcategory"
            value="1"
            unchecked-value="0"
          >
          </base-checkbox>
        </div>

        <div class="col-xs-12 col-md">
          <validation-provider
            tag="div"
            rules="required"
            :name=`category_module[${index}]position`
            v-slot="{ errors, valid }">
            <base-select
              :name=`category_module[${index}]position`
              :label="entry_position"
              v-model="configurations.category_module[index].position"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
            >
              <option
                v-for="(position, index) in Type_PositionColumn"
                :key="index"
                :value="index"
              >
                { position }
              </option>
            </base-select>
          </validation-provider>
        </div>

        <div class="col-xs-12 col-md-2">
          <validation-provider
            tag="div"
            rules="required"
            :name=`category_module[${index}]style`
            v-slot="{ errors, valid }">
            <base-select
              :name=`category_module[${index}]style`
              :label="entry_style"
              v-model="configurations.category_module[index].style"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
            >
              <option
                v-for="(style, optionIndex) in Type_StyleCategory.getEnumList()"
                :key="optionIndex"
                :value="optionIndex"
              >
                { style.title }
              </option>
            </base-select>
          </validation-provider>
        </div>

        <div class="col-xs-6 col-md-2">
          <validation-provider
            tag="div"
            rules="required"
            :name=`category_module[${index}]status`
            v-slot="{ errors, valid }">
            <base-select
              :name=`category_module[${index}]status`
              :label="entry_status"
              v-model="configurations.category_module[index].status"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm"
            >
              <option
                v-for="(status, index) in Type_Status"
                :key="index"
                :value="index"
              >
                { status }
              </option>
            </base-select>
          </validation-provider>
        </div>

        <div class="col-xs-6 col-md-1">
          <validation-provider
            tag="div"
            rules="required"
            :name=`category_module[${index}]sort_order`
            v-slot="{ errors, valid }"
          >
            <base-input
              type="text"
              :name=`category_module[${index}]sort_order`
              :label="entry_sort_order"
              v-model="configurations.category_module[index].sort_order"
              mask="number"
              :error="errors[0]"
              :valid="valid"
              :disabled="disableForm">
            </base-input>
          </validation-provider>
        </div>
        <div class="col-md-width-auto">
          <div
            class="padding-medium cursor-pointer top-margin-medium"
            data-tooltip="{{ button_remove }}"
            @click="removeModule(index)"
          >
            <i class="fas fa-trash text-gray"></i>
          </div>
        </div>
      </div>
    </base-card>

  </div>
{% endblock %}
