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

{% block content %}

  <div class="container-fluid">

    <div class="row">

      <div class="col-xs-12">
        <div v-show="tabs[0].active">
          <div class="row">
            <div class="col-xs-12 col-sm-8">
              <base-card class="padding-large">

                <span class="text-small text-dark text-bold visible-block">{ text_autentication_requirements }</span>
                <div class="flex flex-row top-margin-large">
                  <base-button
                    target="_blank"
                    href="{{ url_autentication }}" 
                    >
                    { text_autentication }
                  </base-button>
                </div>

                <div class="flex flex-row top-margin-large">
                  <base-button
                    :loading="loadingBtn"
                    @click.native="() => validateCredentials(url_validate_credentials)">
                    { text_validate_auth }
                  </base-button>
                </div>

              </base-card>
            </div>
            <div class="col-xs-12 col-sm-4">
              <base-card class="padding-large">

                <validation-provider
                  tag="div"
                  rules="required"
                  name="pagseguro_api_status"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_status"
                    name="pagseguro_api_status"
                    v-model="configurations.pagseguro_api_status"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key">
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  rules="required"
                  class="top-margin-large"
                  name="pagseguro_api_ambiente"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_environment"
                    name="pagseguro_api_ambiente"
                    v-model="configurations.pagseguro_api_ambiente"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(value, key) in Type_Environment.nickname"
                      :key="key"
                      :value="key">
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  rules="required"
                  class="top-margin-large"
                  name="pagseguro_api_display"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_display_in"
                    name="pagseguro_api_display"
                    v-model="configurations.pagseguro_api_display"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(value, key) in Type_DisplayModuleOption"
                      :key="key"
                      :value="key">
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  rules="required"
                  class="top-margin-large"
                  name="pagseguro_api_log_error"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_log_error"
                    name="pagseguro_api_log_error"
                    v-model="configurations.pagseguro_api_log_error"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key">
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order"
                  v-slot="{ errors, valid }">
                  <base-input
                    :label="text_order"
                    name="pagseguro_api_order"
                    v-model="configurations.pagseguro_api_order"
                    mask="integer"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  rules="required"
                  class="top-margin-large"
                  name="pagseguro_api_region"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_region"
                    name="pagseguro_api_region"
                    v-model="configurations.pagseguro_api_region"
                    :error="errors[0]"
                    :valid="valid">
                    <option value="0">{ text_all }</option>
                    <option
                      v-for="(geo_zone, key) in geo_zones"
                      :key="geo_zone.geo_zone_id"
                      :value="geo_zone.geo_zone_id">
                      { geo_zone.name }
                    </option>
                  </base-select>
                </validation-provider>
              </base-card>
            </div>
          </div>
        </div>

        <div v-show="tabs[1].active">
          <div class="row">
            <div class="col-xs-12 col-sm-8">
              <base-card class="padding-large">

                <validation-provider
                  tag="div"
                  name="pagseguro_api_order_status_replicar"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_status_replicar"
                    name="pagseguro_api_order_status_replicar"
                    v-model="configurations.pagseguro_api_order_status_replicar"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order_status_pending"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_waiting_payment"
                    name="pagseguro_api_order_status_pending"
                    v-model="configurations.pagseguro_api_order_status_pending"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order_status_paid"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_paid"
                    name="pagseguro_api_order_status_paid"
                    v-model="configurations.pagseguro_api_order_status_paid"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order_status_authorized"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_authorized"
                    name="pagseguro_api_order_status_authorized"
                    v-model="configurations.pagseguro_api_order_status_authorized"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order_status_canceled"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_canceled"
                    name="pagseguro_api_order_status_canceled"
                    v-model="configurations.pagseguro_api_order_status_canceled"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_order_status_denied"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_denied"
                    name="pagseguro_api_order_status_denied"
                    v-model="configurations.pagseguro_api_order_status_denied"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(order_status, key) in order_statuses"
                      :key="order_status.order_status_id"
                      :value="order_status.order_status_id">
                      { order_status.name }
                    </option>
                  </base-select>
                </validation-provider>

              </base-card>
            </div>
          </div>
        </div>

        <div v-show="tabs[2].active">
          <div class="row">

            <div class="col-xs-12 col-sm-4 last-md">
              <base-card class="padding-large">

                <validation-provider
                  tag="div"
                  name="pagseguro_api_discount"
                  v-slot="{ errors, valid }">
                  <base-select
                    :label="text_discount"
                    name="pagseguro_api_discount"
                    v-model="configurations.pagseguro_api_discount"
                    :error="errors[0]"
                    :valid="valid">
                    <option
                      v-for="(value, key) in Type_Status"
                      :key="key"
                      :value="key">
                      { value }
                    </option>
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_discount_order"
                  v-slot="{ errors, valid }">
                  <base-input
                    :label="text_order_discount"
                    name="pagseguro_api_discount_order"
                    v-model="configurations.pagseguro_api_discount_order"
                    mask="integer"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

              </base-card>
            </div>

            <div class="col-xs-12 bottom-padding-x-small">
              <div class="content-box">
                <span class="text-x-large text-dark visible-block">{{ text_billet }}</span>
              </div>
            </div>


            <div class="col-xs-12 col-sm-8">
{#              <base-card class="padding-large">#}

{#                <validation-provider#}
{#                  tag="div"#}
{#                  name="pagseguro_api_pix_status"#}
{#                  v-slot="{ errors, valid }">#}
{#                  <base-checkbox#}
{#                    :label="text_pix"#}
{#                    name="pagseguro_api_pix_status"#}
{#                    v-model="configurations.pagseguro_api_pix.status"#}
{#                    value="1"#}
{#                    unchecked-value="0">#}
{#                  </base-checkbox>#}
{#                </validation-provider>#}

{#                <validation-provider#}
{#                  tag="div"#}
{#                  class="top-margin-large"#}
{#                  name="pagseguro_api_pix_title"#}
{#                  v-slot="{ errors, valid }">#}
{#                  <base-input#}
{#                    :label="text_title"#}
{#                    name="pagseguro_api_pix_title"#}
{#                    v-model="configurations.pagseguro_api_pix.title"#}
{#                    :error="errors[0]"#}
{#                    :valid="valid">#}
{#                  </base-input>#}
{#                </validation-provider>#}

{#                <div class="row small-space-xs bottom-xs top-margin-large">#}

{#                  <validation-provider#}
{#                    tag="div"#}
{#                    class="col-xs"#}
{#                    name="pagseguro_api_pix_valor_minimo"#}
{#                    v-slot="{ errors, valid }">#}
{#                    <base-input#}
{#                      :label="text_min_value"#}
{#                      name="pagseguro_api_pix_valor_minimo"#}
{#                      v-model="configurations.pagseguro_api_pix.valor_minimo"#}
{#                      :error="errors[0]"#}
{#                      :valid="valid">#}
{#                    </base-input>#}
{#                  </validation-provider>#}

{#                  <validation-provider#}
{#                    tag="div"#}
{#                    class="col-xs"#}
{#                    name="pagseguro_api_pix_desconto"#}
{#                    v-slot="{ errors, valid }">#}
{#                    <base-input#}
{#                      :label="text_discount"#}
{#                      name="pagseguro_api_pix_desconto"#}
{#                      v-model="configurations.pagseguro_api_pix.desconto"#}
{#                      :error="errors[0]"#}
{#                      :valid="valid">#}
{#                    </base-input>#}
{#                  </validation-provider>#}

{#                  <validation-provider#}
{#                    tag="div"#}
{#                    class="col-xs"#}
{#                    name="pagseguro_api_pix_tipo_desconto"#}
{#                    v-slot="{ errors, valid }">#}
{#                    <base-select#}
{#                      name="pagseguro_api_pix_tipo_desconto"#}
{#                      :label="text_discount_type"#}
{#                      v-model="configurations.pagseguro_api_pix.tipo_desconto"#}
{#                      :valid="valid"#}
{#                      :error="errors[0]">#}
{#                      <option#}
{#                        v-for="(value, key) in Type_MarketplaceAdjustmentPrice"#}
{#                        :key="key"#}
{#                        :value="key">#}
{#                        { value }#}
{#                      </option>#}
{#                    </base-select>#}
{#                  </validation-provider>#}
{#                </div>#}
{#              </base-card>#}

              <base-card class="padding-large">

                <validation-provider
                  tag="div"
                  name="pagseguro_api_billet_status"
                  v-slot="{ errors, valid }">
                  <base-checkbox
                    :label="text_billet"
                    name="pagseguro_api_billet_status"
                    v-model="configurations.pagseguro_api_billet.status"
                    value="1"
                    unchecked-value="0">
                  </base-checkbox>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="top-margin-large"
                  name="pagseguro_api_billet_title"
                  v-slot="{ errors, valid }">
                  <base-input
                    :label="text_title"
                    name="pagseguro_api_billet_title"
                    v-model="configurations.pagseguro_api_billet.title"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

                <div class="row small-space-xs bottom-xs top-margin-large">

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_billet_valor_minimo"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_min_value"
                      name="pagseguro_api_billet_valor_minimo"
                      v-model="configurations.pagseguro_api_billet.valor_minimo"
                      mask="brazilCurrency"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    rules="numeric"
                    name="pagseguro_api_billet_validade"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_validity"
                      name="pagseguro_api_billet_validade"
                      v-model="configurations.pagseguro_api_billet.validade"
                      mask="positiveInteger"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_billet_desconto"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_discount"
                      name="pagseguro_api_billet_desconto"
                      v-model="configurations.pagseguro_api_billet.desconto"
                      :disabled="!parseBoolean(configurations.pagseguro_api_discount)"
                      :mask="pagseguroapiDescontoBoleto"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_billet_tipo_desconto"
                    v-slot="{ errors, valid }">
                    <base-select
                      name="pagseguro_api_billet_tipo_desconto"
                      :label="text_discount_type"
                      v-model="configurations.pagseguro_api_billet.tipo_desconto"
                      :disabled="!parseBoolean(configurations.pagseguro_api_discount)"
                      :valid="valid"
                      :error="errors[0]">
                      <option
                        v-for="(value, key) in Type_MarketplaceAdjustmentPrice"
                        :key="key"
                        :value="key">
                        { value }
                      </option>
                    </base-select>
                  </validation-provider>
                </div>
              </base-card>

              <span class="text-x-large text-dark visible-block top-margin-large bottom-margin-medium">{{ text_credit_card }}</span>

              <base-card class="padding-large top-margin-large">

                <validation-provider
                  tag="div"
                  name="pagseguro_api_credit_card_title"
                  v-slot="{ errors, valid }">
                  <base-input
                    :label="text_title"
                    name="pagseguro_api_credit_card_title"
                    v-model="configurations.pagseguro_api_credit_card_title"
                    :error="errors[0]"
                    :valid="valid">
                  </base-input>
                </validation-provider>

                <div class="row small-space-xs bottom-xs top-margin-large">

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_credit_card_parcela_minima"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installment_min_value"
                      name="pagseguro_api_credit_card_parcela_minima"
                      v-model="configurations.pagseguro_api_parcela_minima"
                      mask="brazilCurrency"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    rules="required"
                    name="pagseguro_api_parcela_qtdmax"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installments_qty_max"
                      name="pagseguro_api_parcela_qtdmax"
                      v-model="configurations.pagseguro_api_parcela_qtdmax"
                      mask="positiveInteger"
                      :error="errors[0]"
                      :valid="valid"
                      required>
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    :class="(configurations.pagseguro_api_config_parcelamento == Type_ConfigParcelamento.PorParcela) ? 'hidden' : 'col-xs'"
                    name="pagseguro_api_credit_card_porcentagem_juros"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_interest"
                      name="pagseguro_api_credit_card_porcentagem_juros"
                      v-model="configurations.pagseguro_api_parcela_juros"
                      mask="percentage"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>
                </div>

                <div class="row small-space-xs bottom-xs top-margin-large">

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_credit_card_config_parcelamento"
                    v-slot="{ errors, valid }">
                    <base-select
                      name="pagseguro_api_credit_card_config_parcelamento"
                      :label="text_installment_config_type"
                      v-model="configurations.pagseguro_api_config_parcelamento"
                      :valid="valid"
                      :error="errors[0]">
                      <option
                        v-for="(value, key) in Type_ConfigParcelamento.getEnumList()"
                        :key="key"
                        :value="key">
                        { value }
                      </option>
                    </base-select>
                  </validation-provider>

                </div>

                <div v-if="(configurations.pagseguro_api_config_parcelamento == Type_ConfigParcelamento.Padrao)"
                     class="row small-space-xs bottom-xs top-margin-large">

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_credit_card_parcela_comdesconto"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installments_with_discount"
                      name="pagseguro_api_credit_card_parcela_comdesconto"
                      v-model="configurations.pagseguro_api_parcela_comdesconto"
                      mask="positiveInteger"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_credit_card_parcela_desconto"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_discount_number"
                      name="pagseguro_api_credit_card_parcela_desconto"
                      v-model="configurations.pagseguro_api_parcela_desconto"
                      mask="percentage"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    name="pagseguro_api_credit_card_parcela_semjuros"
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installments_without_interest"
                      name="pagseguro_api_credit_card_parcela_semjuros"
                      v-model="configurations.pagseguro_api_parcela_semjuros"
                      mask="positiveInteger"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                </div>

                <div v-if="(configurations.pagseguro_api_config_parcelamento == Type_ConfigParcelamento.PorParcela)"
                     v-for="(value, keyParcela) in configurations.pagseguro_api_parcelamento_configs"
                     class="row small-space-xs bottom-xs top-margin-large">

                  <div class="col-xs-12">
                  <div class="flex content-center">
                    <span class="field-label">{text_parcela} {keyParcela+1} </span>
                      <div  v-if="keyParcela === 0"
                           @mouseover="iconDisplay" 
                           @mouseleave="iconNotDisplay" 
                           >
                        <i class="icon-info fas fa-info-circle"></i>
                      </div>
                       <div v-show= "showModal && keyParcela === 0" 
                       class="content-box modal-info-installments show-modal absolute-position">
                        <span class="text-medium" v-text="'{{ entry_pagseguro_api_info }}'"></span></br>
                      </div>
                   </div> 
                  </div>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].val_minimo`
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installment_min_total"
                      :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].val_minimo`
                      v-model="configurations.pagseguro_api_parcelamento_configs[keyParcela].val_minimo"
                      mask="brazilCurrency"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].tipo_calculo`
                    v-slot="{ errors, valid }">
                    <base-select
                      :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].tipo_calculo`
                      :label="text_installment_calc_type"
                      v-model="configurations.pagseguro_api_parcelamento_configs[keyParcela].tipo_calculo"
                      :valid="valid"
                      :error="errors[0]">
                      <option
                        v-for="(value, key) in Type_CalculoParcelamento.getEnumList()"
                        :key="key"
                        :value="key">
                        { value }
                      </option>
                    </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="col-xs"
                    :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].percentual_calculo`
                    v-slot="{ errors, valid }">
                    <base-input
                      :label="text_installment_percent"
                      :name=`configurations.pagseguro_api_parcelamento_configs[${keyParcela}].percentual_calculo`
                      v-model="configurations.pagseguro_api_parcelamento_configs[keyParcela].percentual_calculo"
                      mask="percentage"
                      :error="errors[0]"
                      :valid="valid">
                    </base-input>
                  </validation-provider>

                </div>

                <div v-for="(value, key) in configurations.pagseguro_api_credit_card" :key="key" class="row small-space-xs bottom-xs top-margin-small bottom-border-gray">
                  <div class="top-margin-large bottom-padding-small col-xs-12">
                    <validation-provider
                      tag="div"
                      :name=`pagseguro_api_status_${value.descricao}`
                      v-slot="{ errors, valid }">
                      <base-checkbox
                        class="text-capitalize"
                        :label="value.descricao"
                        :name=`pagseguro_api_status_${value.descricao}`
                        v-model="configurations.pagseguro_api_credit_card[key].status"
                        :checked="value.status"
                        value="1"
                        unchecked-value="0">
                      </base-checkbox>
                    </validation-provider>
                  </div>



                  <div v-if="(configurations.pagseguro_api_config_parcelamento == Type_ConfigParcelamento.PorBandeira)"
                       class="row small-space-xs bottom-xs col-xs">
                    <validation-provider
                      tag="div"
                      class="col-xs"
                      :name=`pagseguro_api_valor_minimo_${value.descricao}`
                      v-slot="{ errors, valid }">
                      <base-input
                        :label="text_min_value"
                        :name=`pagseguro_api_valor_minimo_${value.descricao}`
                        v-model="configurations.pagseguro_api_credit_card[key].valor_minimo"
                        mask="brazilCurrency"
                        :error="errors[0]"
                        :valid="valid">
                      </base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs"
                      :name=`pagseguro_api_total_parcela_${value.descricao}`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`pagseguro_api_total_parcela_${value.descricao}`
                        :label="text_installments_total"
                        v-model="configurations.pagseguro_api_credit_card[key].total_parcela"
                        :valid="valid"
                        :error="errors[0]">
                        <option
                          v-for="index in 12"
                          :key="index"
                          :value="index">
                          { index + 'x' }
                        </option>
                      </base-select>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs"
                      :name=`pagseguro_api_parcela_juros_interest_${value.descricao}`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`pagseguro_api_parcela_juros_${value.descricao}`
                        :label="text_installments_without_interest"
                        v-model="configurations.pagseguro_api_credit_card[key].parcela_juros"
                        :valid="valid"
                        :error="errors[0]">
                        <option
                          v-for="index in 12"
                          :key="index"
                          :value="index">
                          { index + 'x' }
                        </option>
                      </base-select>
                    </validation-provider>

                  </div>
                </div>

              </base-card>
            </div>

          </div>
        </div>

      </div>
    </div>

  </div>

{% endblock %}