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

{% block content %}

  <div class="container-fluid">
    <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='boughtaslo_title'
          rules="required"
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_boughtalso_title"
            name='boughtaslo_title'
            v-model="configurations.boughtalso_title"
            :required="true"
            mask="alphanumeric"
            maxlength="70"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          name='boughtalso_subtitle'
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_boughtalso_subtitle"
            name='boughtalso_subtitle'
            v-model="configurations.boughtalso_subtitle"
            mask="alphanumeric"
            maxlength="100"
            :valid="valid"
            :error="errors[0]"
            :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}
      </base-button>
    </div>

    <base-card
      v-if="configurations.boughtalso_module.length"
      v-for="(module, moduleIndex) in configurations.boughtalso_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=`boughtalso_module[${moduleIndex}][position]`
          :rules="{
            required: true,
            module_is_duplicated: {
                data: configurations.boughtalso_module,
                index: moduleIndex
            }
          }"
          v-slot="{ errors, valid }">
          <base-select
            :name=`boughtalso_module[${moduleIndex}][position]`
            :label="entry_boughtalso_position"
            v-model="module.position"
            :valid="valid"
            :disabled="disableForm"
            :error="errors[0]">>
            <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-xs-12 col-md"
          :name=`boughtalso_module[${moduleIndex}][limit]`
          rules="required"
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_boughtalso_limit"
            :name=`boughtalso_module[${moduleIndex}][limit]`
            v-model="module.limit"
            mask="positiveInteger"
            maxlength="2"
            :required="true"
            :valid="valid"
            :error="errors[0]"
            :disabled="disableForm">
          </base-input>
        </validation-provider>

        <validation-provider
          tag="div"
          class="col-xs-12 col-md"
          :name=`boughtalso_module[${moduleIndex}][status]`
          rules=""
          v-slot="{ errors, valid }">
          <base-select
            :name=`boughtalso_module[${moduleIndex}][status]`
            :label="entry_boughtalso_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-xs-12 col-md"
          :name=`boughtalso_module[${moduleIndex}][sort_order]`
          rules=""
          v-slot="{ errors, valid }">
          <base-input
            :label="entry_boughtalso_order"
            :name=`boughtalso_module[${moduleIndex}][sort_order]`
            mask="positiveInteger"
            v-model="module.sort_order"
            :valid="valid"
            :disabled="disableForm"
            maxlength="2">
          </base-input>
        </validation-provider>

        <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 %}