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

{% block content %}

  <div class="container-fluid">

    {# Card e configuração do titulo #}
    <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='brandproducts_title'
          rules="required"
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_brandproducts_title"
            name='brandproducts_title'
            v-model="configurations.brandproducts_title"
            :required="true"
            mask="alphanumeric"
            :valid="valid"
            :error="errors[0]"
            maxlength="100"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

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

    {# Botão adicionar modulo #}
    <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}
      </base-button>
    </div>

    <base-card
      v-if="configurations.brandproducts_module.length"
      v-for="(module, moduleIndex) in configurations.brandproducts_module"
      :key="moduleIndex"
      class="padding-large bottom-margin-small">
      <div class="row small-space-xs bottom-xs">

        {# Posição modulo  #}
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`boughtalso_module[${moduleIndex}][position]`
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :name=`brandproducts_module[${moduleIndex}][position]`
            :label="entry_brandproducts_position"
            v-model="module.position"
            :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>

        {# Limite #}
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`brandproducts_module[${moduleIndex}][limit]`
          rules="required|minmax_number:1,24"
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_brandproducts_limit"
            :name=`brandproducts_module[${moduleIndex}][limit]`
            v-model="module.limit"
            :required="true"
            mask="positiveInteger"
            maxlength="2"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

        {# Status modulo  #}
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`brandproducts_module[${moduleIndex}][status]`
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :name=`brandproducts_module[${moduleIndex}][status]`
            :label="entry_brandproducts_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>

        {# Input ordenação #}
        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`brandproducts_module[${moduleIndex}][sort_order]`
          rules=""
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_brandproducts_order"
            :name=`brandproducts_module[${moduleIndex}][sort_order]`
            mask="positiveInteger"
            v-model="module.sort_order"
            :valid="valid"
            :disabled="disableForm"
            maxlength="2">
          </base-input>
        </validation-provider>

        {# Botão lixeira #}
        <div class="col-xs-12 col-md-width-auto">
          <base-button
            apperance="outline"
            square
            @click.native="() => onRemoveModule(moduleIndex)">
            <i class="fas fa-trash"></i>
          </base-button>
        </div>

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