{{ header }}
<section class="container-fluid" id="root">
	{% if content_top %}
		{{ content_top }}
	{% endif %}
	{{breadcrumbs}}
	<div class="row" id="address-content">
		<div class="col-xs-12 col-md-4 hidden-md-down js-account-aside">
			<div class="content-box js-fixed-on-top">
				{{ account }}
			</div>
		</div>
		<div class="col-xs no-padding top-margin-medium bottom-margin-large">
			<div class="content-box">
				<div class="background-base-content">
					<div v-for="(result, index) in addresses">
						<base-content :icon="'fa-solid fa-location-dot'" :title="result.default == true ? 'Endereço de faturamento' : 'Endereço de entrega ' + index">
							<div class="col-xs-12 no-padding">
								<div class="flex">
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_name"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.firstname + ' ' + result.lastname"></span>
									</div>
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_local"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.apelido"></span>
									</div>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="row">
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_address"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.address_1 + ', ' + result.numero + ' - ' + (result.address_2 ? result.address_2 : '')"></span>
									</div>
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_complement"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.complemento ? result.complemento : '-' "></span>
									</div>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="row">
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_city"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.city + ' - ' + result.zone_code"></span>
									</div>
									<div class="col-xs-12 col-md-6 no-padding top-margin-medium">
										<span class="visible-block text-small text-gray bottom-margin-x-small" v-text="language.text_postcode"></span>
										<span class="visible-block text-medium text-dark-opacity text-bold" v-text="result.postcode.substring(0,5) + '-' + result.postcode.substring(5)"></span>
									</div>
								</div>
							</div>
							<div class="col-xs-6 col-md-6 no-padding top-margin-medium">
								<div class="flex gap-4">

									<div>
										<a class="account-edit-button" title="Clique para editar" :href="result.update" v-if="result.update">
											<span>Editar</span>
										</a>
									</div>

									<div v-if="result.default == false">
										<button class="btn-base-context" title="Remover" @click="openModal(result.delete)" v-if="result.delete"> 
											<i class="fa-solid fa-trash"></i>
										</button>
									</div>
								</div>
							</div>
						</base-content>
					</div>

					<div class="full-width flex center-xs">
						<a class="account-add-button" title="Clique para adicionar" :href="insert">
							<span>Adicionar</span>
						</a>
					</div>

					<base-modal
    				v-if="showModal" 
						title="Deseja realmente excluir o endereço?" 
						size="medium"
        		@close="onClose"
					>
						<div class="horizontal-padding-small text-center">
							Ao excluir o endereço, o mesmo será permanentemente apagado.
							<div class="top-margin-medium flex gap-1 center-xs">
								<base-button
									apperance="confirm"
									square
									size="medium"
									v-text="'Confirmar'"
									@click.native="deleteAddress()"
								>
								</base-button>
								<base-button
									apperance="cancel"
									square
									size="medium"
									v-text="'Cancelar'"
									@click.native="onClose()"
								>
								</base-button>
							</div>
						</div>
					</base-modal>
				</div>
			</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>
