{{ header }}
<section id="root" class="container-fluid">
	{% if content_top %}
		{{ content_top }}
	{% endif %}
	{{breadcrumbs}}
	<div class="row">
		<div class="col-md-4 hidden-md-down">
			<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 class="flex full-width gap-1 no-gap-md bottom-xs between-xs">
						<div>
							<h2 v-text="headingTitle" class="text-h1-title text-dark"></h2>
						</div>
						<div>
							<label class="checkbox">
								<input class="checkbox-entry" type="checkbox" :checked="isAllChecked" v-model="isAllChecked" @click="checkAllInterests()" name="check_all_interest"/>
								<span class="checkbox-text text-dark-opacity">Selecionar todos produtos</span>
							</label>
						</div>
					</div>
					<base-content :show-icon="false" :title="headingTitle" :show-title="false">
						<form action="{{ action }}" method="post">
							<span class="text-medium text-dark" v-text="'Desfrute de uma experiência única de compras com recomendações personalizadas.'"></span>
							<div class="flex middle-xs top-margin-medium">
								<div v-for="category in categories" :class="interestsCategories ? 'col-xs-12 col-ms-6 col-sm-4 no-padding vertical-padding-medium' : 'col-xs-12 no-padding'">
									<div class="content-box">
										<label class="checkbox interests-scale">
											<input type="checkbox" :checked="category['checked']" v-model="category['checked']" :name="`categories[${category.id}][status]`" :id="category.id" class="checkbox-entry js-check-control">
											<span class="checkbox-text interests-title" :title="firtLetterUpperCase(category.name)" v-text="formatCategoryName(category.name, 18)"></span>
										</label>
									</div>
								</div>
							</div>
							<div class="top-margin-medium">
								<button type="submit" class="btn-default btn-large btn-neutral-black">
									<span>Salvar interesses</span>
								</button>
							</div>
						</form>
					</base-content>
				</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 = {{ configurations|json_encode() }};
</script>
