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

{% block content %}
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 col-md-8">
				<div class="content-box bottom-padding-large">
					<div class="flex between-xs middle-xs">
						<span class="text-x-large text-dark">Configurações</span>
					</div>
				</div>
				<div class="col-xs-12 no-padding">
					<base-card class>
						<div class="padding-medium ">
							<validation-provider 
								v-for="(field, index) in fields" 
								class="horizontal-padding-medium vertical-margin-medium"
								tag="div" 
								:rules="field.rules"
								:key="index" 
								:name="field.name" :rules="field.rules" 
								v-slot="{ errors, valid }"
							>
								<div v-if="['text'].includes(field.type)">
									<base-input
										class="flex"
										type="field.type"
										:name="field.name"
										:ref="field.name" 
										:description="field.description"
										:id="field.name"
										:label="field.label" 
										:mask="field.mask" 
										:valid="valid" 
										:error="errors[0]" 
										:disabled="disableForm" 
										@input="handleText($event, `${field.name}`)"
										v-model="configurations[field.name]">
									</base-input>
								</div>
								<div v-else-if="['select'].includes(field.type)">
                  <base-select 
                  	:name="field.name" 
                    :id="field.name" 
                  	:label="field.label" 
                    :ref="field.name" 
                    :description="field.description" 
                    :valid="valid" 
                    :error="errors[0]" 
                    :disabled="disableForm" 
                    v-model="configurations[field.name]"
                  >
                    <option v-for="(value, key) in  getTypeEnumList(`${field.name}`, `${field.options}`, `${field.customOptions}`)  " :value="key">
                      { value }
                    </option>
                  </base-select>
								</div>
							</validation-provider>
						</div>
					</base-card>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
