{{ header }}
<section class="container-fluid" id="root">
	{% 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="header-card-back">
						<div class="flex middle-xs text-dark text-h2-title">
							<h2 v-text="heading" class="text-h1-title text-dark text-main-title"></h2>
						</div>
					</div>

					{% if show_return %}
						<div class="flex-col-xs">
							<base-listing v-for="(returnItem, index) in returns" :key="index" :icon="'fa-solid fa-chevron-right'" :is-open="openContent[index]['show']" :showicon="true" :subtitle="'Pedido: '" :subtitlevalue="returnItem[0].order_id" :subtitlesecond="'Data adicionada:'" :subtitlesecondvalue="returnItem[0].date_added" :index="index" title-size="medium" @callback="handleCardClick">
								<div class="content-listing-card" style="padding: 0px; overflow: hidden">
									<div class="vartical-padding-small horizontal-padding-x-large flex-col-xs gap-4 no-gap-md devolution-container scroll-gray">
										<div v-for="(item, key) in returnItem">
											<div class="flex nowrap-xs gap-4 middle-xs">
												<div>
													<img :src="item.image.jpg" :alt="item.product">
												</div>
												<div class="flex-col flex-1">
													<div>
													<a v-text="handleProductName(item.product, 18)" class="text-medium text-nowrap" :title="item.product" :href="item.href"></a>
													</div>
													<div class="flex-col-xs flex-md gap-1 no-gap-md middle-md between-xs top-margin-x-small">
														<span class="text-medium">Devolução:
															<strong class="text-dark-opacity" v-text="item.return_id"></strong>
														</span>
														<span class="text-medium">Quantidade:
															<strong class="text-dark-opacity" v-text="item.quantity + ' Unid.'"></strong>
														</span>
														<span class="text-medium">Embalagem aberta?
															<strong class="text-dark-opacity" v-text="item.opened == 1 ? 'Sim' : 'Não'"></strong>
														</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<transition name="content-opacity" mode="out-in">
										<div v-if="openContent[index]['show'] == false" class="full-width flex top-margin-small vertical-padding-medium">
											<button type="button" @click="handleCardClick(index)" class="full-width text-small-link vertical-padding-x-small flex middle-xs center-xs gap-1" style="cursor: pointer; background: transparent;">
												<span>Ver todos os detalhes</span>
											</button>
										</div>
									</transition>

									{# BOX DE INFORMAÇÃO #}
									<transition name="content-translate-y" mode="out-in">
										<div class="top-margin-small horizontal-padding-medium" v-if="openContent[index]['show']">
											<div class="padding-medium flex-col gap-5 box-shadow-dark rounded-medium" style="background-color: #F7F7F7">
												<div class="flex middle-xs gap-6 full-width">
													<div class="circle-info-icon text-dark-opacity no-padding flex">
														<i class="fa-solid fa-circle-info"></i>
													</div>
													<div class="flex-col-xs flex-md middle-md gap-2">
														<div class="flex-col" >
															<span class="text-medium text-gray">Status</span>
															<span class="text-medium text-bold text-dark-opacity" v-text="returnItem[0].return_status_id"></span>
														</div>
														<div class="flex-col devolution-reason-xs devolution-reason-md">
															<span class="text-medium text-gray">Motivo da devolução</span>
															<span class="text-medium text-bold text-dark-opacity" v-text="returnItem[0].return_reason_id"></span>
														</div>
														<div class="flex-col devolution-ordered-xs devolution-ordered-md">
															<span class="text-medium text-gray">Data do Pedido</span>
															<span class="text-medium text-bold text-dark-opacity" v-text="returnItem[0].date_ordered"></span>
														</div>
													</div>
												</div>

												<div class="flex middle-xs gap-5 top-margin-x-small full-width nowrap-xs" v-if="returnItem[0].comment">
													<div class="comments-icon text-dark-opacity no-padding flex">
														<i class="fa-solid fa-comments"></i>
													</div>
													<div class="flex-col-xs gap-2 no-gap-md flex-md">
														<div class="flex middle-xs">
															<span class="text-medium text-gray text-nowrap">Comentários da devolução</span>
														</div>
														<div class="full-width devolution-comment-xs devolution-comment-md">
															<span class="text-small text-break-word text-bold text-dark-opacity" :title="returnItem[0].comment" v-text="handleProductName(returnItem[0].comment, 206)"></span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</transition>
									<transition name="content-opacity" mode="out-in">
										<div v-if="openContent[index]['show'] == true" class="full-width flex vertical-padding-small top-margin-small bottom-margin-x-small">
											<button type="button" @click="handleCardClick(index)" class="full-width text-small-link vertical-padding-x-small flex middle-xs center-xs gap-1" style="cursor: pointer; background: transparent;">
												<span>Ver menos detalhes</span>
											</button>
										</div>
									</transition>
								</div>
							</base-listing>
						</div>
					{% else %}
						<div class="box-shadow-dark rounded-medium background-white flex center-xs middle-xs full-width gap-3" style="height: 150px">
							<span class="text-large text-dark">{{ text_empty }}</span>
						</div>
					{% endif %}
					<div>{{ pagination }}</div>
				</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 = {{ dataVue|json_encode() }};
</script>
