{{ header }}
<section class="container-fluid" id="root">
	{% if content_top %}
		{{ content_top }}
	{% endif %}
	{{breadcrumbs}}
	<div class="row">
		<div class="col-xs-12 col-md-4 hidden-md-down js-account-aside">
			<div class="content-box">
				{{ account }}
			</div>
		</div>

		<div class="col-xs no-padding top-margin-medium bottom-margin-large" id="address-form">
			<div class="content-box">
				
				<base-alert v-show="alert.type" :apperance="alert.type" @close="alert = {}">
					<span v-html="alert.message"></span>
				</base-alert>

      	<validation-observer ref="validationObserver" tag="div" v-slot="{ handleSubmit, invalid }" @submit.prevent="onValidationObserverSubmit()">
					<form id="form-address" class="form-address js-address" :action="action" method="post" enctype="multipart/form-data" ref="form" autocomplete="on" @submit.prevent="handleSubmit(onSubmit)">
						<div class="background-base-content">
							<div class="header-card-back">
								<a :href="back">
									<i class="fa-solid fa-arrow-left"></i>
									Voltar
								</a>
							</div>
							<base-content :icon="'fa-regular fa-address-book'" :title="configurations.address_id ? language.text_edit_address : language.text_new_address" >
								<input type="hidden" name="country_id" :value="configurations.country_id">
								<input type="hidden" name="city" :value="configurations.city"/>
								<input type="hidden" name="tipo_logradouro" :value="configurations.tipo_logradouro"/>
								<input type="hidden" name="logradouro" :value="configurations.logradouro"/>
								<input v-if="configurations.default == true" type="hidden" name="default" :value="configurations.default"/>

								<div class="col-xs-12">
									<div class="row">
										<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
											<div class="padding-leftColumn responsive-padding">
												<validation-provider name="firstname" rules="required|min: 3|max: 32" v-slot="{ errors, valid, passed }">
												<base-input label="Nome" placeholder="Digite o nome" name="firstname" v-model="configurations.firstname" :required="true" mask="alphanumeric" minlength="3" maxlength="32" :error="errors[0]" :valid="passed" :disabled="disableForm"></base-input>
												</validation-provider>
											</div>
										</div>
										<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
											<div class="padding-rightColumn responsive-padding">
												<validation-provider name="lastname" rules="required|min: 3|max: 32" v-slot="{ errors, valid, passed }">
													<base-input label="Sobrenome" placeholder="Digite o sobrenome" name="lastname" v-model="configurations.lastname" :required="true" mask="alphanumeric" minlength="3" maxlength="32" :error="errors[0]" :valid="passed" :disabled="disableForm"></base-input>
												</validation-provider>
											</div>
										</div>
									</div>
								</div>

								<div>
									<base-cep :index="0" :data="configurations" :is_catalog="true" :is_address_user="true" :data_errors="error" :readonly="false" :show_fields="configurations.address_id ? true : false" @callback="dataReturn"/>
								</div>

								<div class="col-xs-6 col-md-6 no-padding top-margin-medium">
									<div class="flex gap-4">
										<div>
											<button type="submit" class="btn-base-context" title="Salvar">
												<i class="fa-solid fa-floppy-disk"></i>
											</button>
										</div>
										<div>
											<a class="btn-base-context" title="Cancelar" :href="back">
												<i class="fa-solid fa-xmark"></i>
											</a>
										</div>
									</div>
								</div>
							</base-content>
						</div>
					</form>
				</validation-observer
			</div>
		</div>
		{% if column_right %}
			<div class="col-md-3 hidden-md-down">
				{{ column_right }}
			</div>
		{% endif %}
	</div>
	{% if content_bottom %}
		{{ content_bottom }}
	{% endif %}
</section>
{{ footer }}


<script type="text/javascript">
	const DATA = {{ data|json_encode() }};
</script>
