{{header}}
<section class="container-fluid order-info" id="root">
	{{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 hidden" id="order-info">
			<div class="content-box top-margin-medium">
				<div
					class="background-dark-gray box-shadow-dark rounded-large col-xs-12">

					{# Title - Buttons #}
					<div class="flex between-xs middle-xs">
						<div class="titles-subtitle">
							<span class="text-h1-title" v-text="'{{ text_order_id }} {{ order_id }}'"></span>
							<span class="text-h6-title text-gray bottom-padding-medium hidden-responsive" v-text="'Realizado em {{ date_added }}'"></span>
						</div>
						<div class="buttons-order-info">
							<div v-if="fidelity == false" class="resize-responsive width-btn-order">
								<base-button apperance="neutral-black" square size="medium" title="Clique para recomprar o pedido" href="{{ order_reorder }}">{{ button_reorder }}</base-button>
							</div>
							<div v-if="order_id" class="resize-responsive width-btn-order">
								<base-button apperance="neutral-white" square size="medium" title="Clique para devolver o pedido" href="{{ link_return }}">{{ button_return_order }}</base-button>
							</div>
							<div v-if="enableToCancel" class="resize-responsive width-btn-order">
								<base-button apperance="neutral-white" square size="medium" title="Clique para cancelar o pedido" class="full-width" @click.native="modalCancelOrder()">{{ button_cancel_order }}</base-button>
							</div>
						</div>
					</div>
					<span class="text-h6-title text-gray bottom-padding-medium hidden-desktop" v-text="'Realizado em {{ date_added }}'"></span>

					{# Order status - Sale process status - Shipping method - Tracking status #}
					<base-card class="padding-medium margin-card-top bottom-margin-medium">
						<div class="row no-margin">
							<div class="col-xs-12 col-md-6 no-padding" :class="!order_history_proccess ? 'line-gray' : '' ">
								<div class="content-box">
									<div class="row-flex-align">
										<span class="text-medium text-gray" v-text="'{{ orderStatusTitle }}'"></span>
										<i class="fa-solid fa-list-check text-dark-opacity left-padding-small"></i>
									</div>
									<div v-if="order_history_proccess" class="top-margin-x-small status-complete">
										<div v-html="order_history_proccess"></div>
									</div>
									<div v-else>
										<div class="top-margin-x-small horizontal-padding-medium width-total">
											<div v-for="(history, index) in reversedHistories" :key="index" class="timeline-item bottom-margin-small">
												<div v-if="index < 3">
													<div class="flex nowrap-xs between-xs">
														<span class="text-small text-dark-opacity text-bold" v-text="history.status + ':'"></span>
														<span class="text-small text-dark-opacity" v-text="history.date_added"></span>
													</div>
													<div :class="['dot', `dot-color-${index % 3}`]"></div>
													<div v-if="index < reversedHistories.length - 1 && index < 2" class="vertical-line"></div>
												</div>
												<div v-else-if="index === 3">
													<div class="listing-more-status margin-arrow-status">
														<label class="more-status">
															<i class="fa-solid fa-chevron-right text-small-link"></i>
															<span class="text-small-link" v-text="'{{ view_more_status }}'"></span>
															<div class="listing-status rounded-small background-light-gray box-shadow-dark">
																<div v-for="(history, index) in reversedHistories" :key="index" class="timeline-item bottom-margin-x-small">
																	<div class="flex nowrap-xs between-xs">
																		<span class="text-small text-dark-opacity" v-text="history.status + ':'"></span>
																		<span class="text-small text-gray" v-text="history.date_added"></span>
																	</div>
																	<div v-if="history.comment">
																		<span class="text-small text-gray" v-text="limitText(history.comment, 80)" :title="replaceTag(history.comment)"></span>
																	</div>
																</div>
															</div>
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div :class="order_history_proccess ? 'line-gray-orderProccess' : '' "></div>
							</div>
							<div class="col-xs-12 col-md-6 no-padding left-padding-medium responsive-left">
								<div class="content-box">
									<div v-if="shipping_method">
										<div class="row-flex-align">
											<span class="text-medium text-gray" v-text="'{{ text_shipping_method }}'"></span>
											<i class="fa-solid fa-truck text-dark-opacity left-padding-small"></i>
										</div>
										<div class="top-margin-x-small">
											<span class="text-small text-dark-opacity text-bold" v-text="shipping_method"></span>
										</div>
									</div>
									<div class="top-margin-medium">
										<div v-if="tracking_code">
											<div class="flex middle-xs nowrap-xs">
												<span class="text-medium text-gray" v-text="'{{ text_tracking_code }}'"></span>
												<i class="fa-regular fa-copy text-dark-opacity left-padding-small cursor-pointer copy-code" @click="copyCode(tracking_code)" title="Copiar código de rastreio"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold word-break">{{ tracking_code }}</span>
											</div>
										</div>
										<div v-for="order_tracking_event in order_tracking_events">
											<div v-if="order_tracking_event.length > 0">
												<div v-for="(order_tracking, order_tracking_index) in order_tracking_event" :key="order_tracking_index">
													<div v-if="order_tracking_index < 1">
														<div class="top-margin-medium">
															<span class="text-gray text-medium" v-text="'{{ text_tracking_status }}'"></span>
														</div>
														<div class="flex between-xs nowrap-xs top-margin-x-small">
															<span class="text-small text-dark-opacity text-bold" v-text="order_tracking.descricao"></span>
															<div class="right-padding-medium">
																<span class="text-small text-dark-opacity text-nowrap" v-text="formatDateTime(order_tracking.data)"></span>
															</div>
														</div>
													</div>
													<div v-else-if="order_tracking_index === 1">
														<div class="listing-more-status top-padding-large">
															<label class="tracking-status">
																<i class="fa-solid fa-chevron-right text-small-link"></i>
																<span class="text-small-link" v-text="'{{ view_more_tracking_status }}'"></span>
																<div class="listing-tracking-status rounded-small background-light-gray box-shadow-dark">
																	<div v-for="(order_tracking, statusHover) in order_tracking_event" :key="statusHover" class="timeline-item bottom-margin-x-small">
																		<div class="flex nowrap-xs between-xs">
																			<span class="text-small text-dark-opacity" v-text="order_tracking.descricao"></span>
																			<span class="text-small text-gray text-nowrap" v-text="formatDateTime(order_tracking.data)"></span>
																		</div>
																	</div>
																</div>
															</label>
														</div>
													</div>
												</div>
											</div>
											<div v-else>
												<span class="text-medium text-dark text-bold" v-text="'{{ text_not_trackEvent }}'"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</base-card>

					{# Payment method - Totals - Shipping address #}
					<base-card class="padding-medium margin-card-top">
						<div class="row no-margin">
							<div class="col-xs-12 col-md-4 line-gray no-padding responsive-bottom-line-gray">
								<div class="content-box">
									<div v-if="payment_method">
										<div v-if="payment_billet">
											<div class="row-flex-align">
												<span class="text-medium text-gray" v-text="'{{ text_payment_method }}'"></span>
												<i class="fa-regular fa-money-bill-1 text-dark-opacity left-padding-small"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_method"></span>
											</div>
											<div class="top-margin-x-small nowrap-xs">
												<a href="{{ payment_billet }}" class="text-small-link text-bold" target="_blank" v-text="'{{ text_billet }}'" title="Clique aqui para visualizar o boleto"></a>
											</div>
										</div>
										<div v-else-if="payment_pix">
											<div class="row-flex-align">
												<span class="text-medium text-gray" v-text="'{{ text_payment_method }}'"></span>
												<i class="fa-brands fa-pix text-dark-opacity left-padding-small"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_method"></span>
											</div>
											<div class="top-margin-x-small">
												<a @click="openModal" class="cursor-pointer text-small-link text-bold" v-text="'{{ text_pix }}'" title="Clique aqui para obter o QR Code"></a>
											</div>
										</div>
										<div v-else-if="payment_info_detail">
											<div class="row-flex-align">
												<span class="text-medium text-gray" v-text="'{{ text_payment_method }}'"></span>
												<i class="fa-regular fa-credit-card text-dark-opacity left-padding-small"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_method"></span>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="' ' + payment_info_detail.cartao_mascara"></span>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_info_detail.qtd_parcela + ' x de ' + payment_info_detail.val_parcela"></span>
											</div>
											<div v-if="payment_info_detail.tid">
												<div class="top-margin-x-small">
													<span class="text-small text-dark-opacity text-bold" v-text="'{{text_payment_tid }}' + payment_info_detail.tid"></span>
												</div>
											</div>
										</div>
										<div v-else-if="debitCardPayment(payment_method) && payment_info_detail == false">
											<div class="row-flex-align">
												<span class="text-medium text-gray" v-text="'{{ text_payment_method }}'"></span>
												<i class="fa-regular fa-credit-card text-dark-opacity left-padding-small"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_method"></span>
											</div>
										</div>
										<div v-else>
											<div class="row-flex-align">
												<span class="text-medium text-gray" v-text="'{{ text_payment_method }}'"></span>
												<i class="fas fa-dollar-sign text-dark-opacity left-padding-small"></i>
											</div>
											<div class="top-margin-x-small">
												<span class="text-small text-dark-opacity text-bold" v-text="payment_method"></span>
											</div>
										</div>
									</div>
									<template v-if="payment_comment">
										<div class="top-margin-x-small">
											<a @click="openModal" class="cursor-pointer text-small-link text-bold" v-text="'Ver instruções para pagamento'" title="Clique aqui para verificar informações adicionais para o pagamento"></a>
										</div>
									</template>
									<div v-if="payment_address">
										<div class="listing-more-status top-padding-large">
											<label class="payment-Address">
												<i class="fa-solid fa-chevron-right text-small-link"></i>
												<span class="text-small-link" v-text="'{{ text_payment_address }}'"></span>
												<div class="listing-payment-Address rounded-small background-light-gray box-shadow-dark">
													<div class="timeline-item bottom-margin-x-small">
														<div class="flex nowrap-xs">
															<span class="text-small text-gray" v-text="formatAddress(payment_address)"></span>
														</div>
													</div>
												</div>
											</label>
										</div>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-md-4 line-gray no-padding left-padding-medium responsive-left">
								<div class="content-box">
									<div class="row-flex-align">
										<span class="text-medium text-gray" v-text="'{{ totalsTitle }}'"></span>
										<i class="fa-solid fa-money-check-dollar text-dark-opacity left-padding-small"></i>
									</div>
									<div class="top-margin-x-small right-padding-medium responsive-bottom-line-gray">
										<div v-for="(total, index_totals) in totals" :key="index_totals">
											<div class="flex nowrap-xs between-xs middle-xs top-margin-x-small">
												<span class="text-small text-gray" v-text="limitText(total.title, 15)" :title="total.title"></span>
												<span class="text-small text-dark-opacity text-bold text-nowrap" v-text="total.text"></span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-md-4 no-padding left-padding-medium responsive-left">
								<div class="content-box">
									<div v-if="shipping_pickup">
										<div class="row-flex-align">
											<span class="text-medium text-gray" v-text="'{{ text_pickup_address }}'"></span>
											<i class="fa-solid fa-location-dot text-dark-opacity left-padding-small"></i>
										</div>
										<div class="top-margin-x-small">
											<span class="text-small text-dark-opacity text-bold" v-text="pickup_info[0].pickup_address + ', ' + pickup_info[0].pickup_number + pickup_info[0].pickup_complement + ', ' + pickup_info[0].pickup_neighborhood + ', ' + pickup_info[0].pickup_city + ', ' + pickup_info[0].pickup_zone + ', ' + pickup_info[0].pickup_postcode"></span>
										</div>
									</div>
									<div v-else-if="shipping_address">
										<div class="row-flex-align">
											<span class="text-medium text-gray" v-text="'{{ text_shipping_address }}'"></span>
											<i class="fa-solid fa-location-dot text-dark-opacity left-padding-small"></i>
										</div>
										<div class="top-margin-x-small">
											<span class="text-small text-dark-opacity text-bold" v-text="formatAddress(shipping_address)"></span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</base-card>

					{# Products listing - Schedule Module Futura - Comments - NFE #}
					<div class="row no-margin">
						<div class="col-xs-12 col-md-6 no-padding">
							<div class="top-margin-medium">
								<div v-for="(cartTipo, keyTipo) in productlist" :key="keyTipo">
									<div v-for="(lista, keyLista, index) in cartTipo" :key="index">
										<div v-if="lista.isListaEscolar">
											<div v-if="Object.keys(productlist).length > 1">
												<hr class="bottom-border-gray vertical-margin-small">
											</div>
											<div v-if="index == 0 ">
												<span class="text-dark-opacity text-large text-bold " v-text="'Lista escolar'"></span>
											</div>
											<div class="bottom-margin-small">
												<span class="text-medium text-gray" v-text="lista.descricao"></span>
											</div>
											<div v-for="(productSchool, keyProductSchool) in lista.products" :key="keyProductSchool" :id="keyLista">
												<div v-if="(keyProductSchool < 3)">
													<div class="content-box nowrap-xs row-flex-align bottom-margin-medium">
														<div class="div-img">
															<img :src="productSchool.image" alt="Imagem do produto" width="80" height="80" class="text-x-small">
														</div>
														<div class="left-margin-small">
															<a :href="productSchool.href_product" class="text-dark-opacity cursor-pointer">
																<span v-text="limitText(productSchool.name, 18)" class="text-medium" :title="productSchool"></span>
															</a>
															<div class="totalsProductSchool">
																<div class="quantity">
																	<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																	<span class="text-small text-dark-opacity text-bold" v-text="productSchool.quantity + ' Unid.'"></span>
																</div>
																<div class="price">
																	<span class="text-small text-gray" v-text="'R$'"></span>
																	<span class="text-small text-dark-opacity text-bold" v-text="transformPrice(productSchool.price)"></span>
																</div>
															</div>
															<div class="flex top-margin-x-small">
																<div v-if="fidelity == false" class="right-padding-small responsive-right-return">
																	<a href="#" class="text-small-link js-product-reorder" :data-product-id="productSchool.id" :data-product-qty="productSchool.quantity" :data-product-size="productSchool.size_id" :data-product-specification="productSchool.specification_id" title="Clique para recomprar o produto" @click.prevent="reorderProduct(productSchool.id)">
																		<span>Recomprar produto</span>
																	</a>
																</div>
																<div>
																	<a :href="productSchool.return" class="text-small-link" title="Clique para devolver o produto">
																		<span>Devolver produto</span>
																	</a>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div v-else>
													<div v-if="keyProductSchool > 2">
														<div class="content-box nowrap-xs row-flex-align bottom-margin-medium hidden" :class="`id-${keyLista}`">
															<div class="div-img">
																<img :src="productSchool.image" alt="Imagem do produto" width="80" height="80" class="text-x-small">
															</div>
															<div class="left-margin-small">
																<a :href="productSchool.href_product" class="text-dark-opacity cursor-pointer">
																	<span v-text="limitText(productSchool.name, 18)" class="text-medium" :title="productSchool"></span>
																</a>
																<div class="totalsProductSchool">
																	<div class="quantity">
																		<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="productSchool.quantity + ' Unid.'"></span>
																	</div>
																	<div class="price">
																		<span class="text-small text-gray" v-text="'R$'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="transformPrice(productSchool.price)"></span>
																	</div>
																</div>
																<div class="flex top-margin-x-small">
																	<div v-if="fidelity == false" class="right-padding-small responsive-right-return">
																		<a href="#" class="text-small-link js-product-reorder" :data-product-id="productSchool.id" :data-product-qty="productSchool.quantity" :data-product-size="productSchool.size_id" :data-product-specification="productSchool.specification_id" title="Clique para recomprar o produto" @click.prevent="reorderProduct(productSchool.id)">
																			<span>Recomprar produto</span>
																		</a>
																	</div>
																	<div>
																		<a :href="productSchool.return" class="text-small-link" title="Clique para devolver o produto">
																			<span>Devolver produto</span>
																		</a>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div v-if="lista.products.length > 3">
												<div class="top-margin-medium">
													<a href="#" @click.prevent="showProductsSchool(keyLista)" title="Clique para ver mais produtos" v-if="showProductsSchool" class="text-small-link cursor-pointer" v-text="'Ver mais produtos'" :class="`key-${keyLista}`"></a>
												</div>
												<div class="top-margin-medium">
													<a href="#" @click.prevent="showProductsSchool(keyLista)" title="Clique para ver menos produtos" class="text-small-link cursor-pointer hidden" v-text="'Ver menos produtos'" :class="`key-${keyLista}`"></a>
												</div>
											</div>
										</div>
										<div v-else>
											<div class="bottom-margin-small">
												<span class="text-dark-opacity text-large text-bold bottom-margin-small" v-text="'Produtos'"></span>
											</div>
											<div v-for="(product, keyProduto) in lista.products" :key="keyProduto">
												<div v-if="(keyProduto < 3) || showAllProducts">
													<div class="content-box nowrap-xs row-flex-align bottom-margin-medium">
														<div class="div-img">
															<img :src="product.image" alt="Imagem do produto" width="80" height="80" class="text-x-small">
														</div>
														<div class="left-margin-small">
															<a :href="product.href_product" class="text-dark-opacity cursor-pointer">
																<span v-text="limitText(product.name, 18)" class="text-medium" :title="product.name"></span>
															</a>
															<div v-if="product.itens_kit">
																<div class="listing-more-status margin-kit">
																	<label class="kit-products">
																		<i class="fa-solid fa-chevron-right text-small-link"></i>
																		<span class="text-small-link" v-text="'{{ view_more_kit_products }}'"></span>
																		<div class="listing-kit rounded-small background-light-gray box-shadow-dark">
																			<div v-for="(itemKit, itemKitKey) in product.itens_kit" :key="itemKitKey" class="timeline-item bottom-margin-x-small">
																				<div class="middle-xs">
																					<span class="text-small text-gray" v-text="'Descrição:'"></span>
																					<span class="text-small text-dark-opacity" v-text="limitText(itemKit.descricao, 18)" :title="itemKit.descricao"></span>
																				</div>
																				<div class="middle-xs">
																					<span class="text-small text-gray " v-text="'Quantidade:'"></span>
																					<span class="text-small text-dark-opacity" v-text="itemKit.quantidade"></span>
																				</div>
																			</div>
																		</div>
																	</label>
																</div>
															</div>
															<div v-if="typeof futuragrade_status !== 'undefined' && futuragrade_status">
																<div class="top-margin-x-small">
																	<div v-if="typeof product.color_description !== 'undefined' && product.color_description">
																		<span class="text-small text-gray" v-text="product.color_template_description + ':'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.color_description"></span>
																	</div>
																	<div v-if="typeof product.size_description !== 'undefined' && product.size_description">
																		<span class="text-small text-gray" v-text="product.size_template_description + ':'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.size_description"></span>
																	</div>
																	<div v-if="typeof product.specification_description !== 'undefined' && product.specification_description">
																		<span class="text-small text-gray" v-text="product.specification_template_description + ':'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.specification_description"></span>
																	</div>
																</div>
															</div>
															<div class="totalsUnit">
																<div v-if="product.pontos > 0">
																	<div class="quantityFidelity">
																		<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.quantity + ' Unid.'"></span>
																	</div>
																	<div class="pointsFidelity">
																		<span class="text-small text-gray" v-text="'{{ column_pontos }}'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.pontos"></span>
																	</div>
																</div>
																<div v-else>
																	<div class="quantity">
																		<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="product.quantity + ' Unid.'"></span>
																	</div>
																	<div class="price">
																		<span class="text-small text-gray" v-text="'R$'"></span>
																		<span class="text-small text-dark-opacity text-bold" v-text="transformPrice(product.price)"></span>
																	</div>
																</div>
															</div>
															<div v-if="product.brinde">
																<span class="text-gray text-small" v-text="'{{ text_gift }}'"></span>
																<span class="text-dark-opacity text-bold text-small" v-text="limitText(product.brinde.product_name, 18)" :title="product.brinde.product_name"></span>
															</div>
															<div class="flex top-margin-x-small">
																<div v-if="fidelity == false" class="right-padding-small responsive-right-return">
																	<a href="#" class="text-small-link js-product-reorder" :data-product-id="product.id" :data-product-qty="product.quantity" :data-product-size="product.size_id" :data-product-specification="product.specification_id" title="Clique para recomprar o produto" @click.prevent="reorderProduct(product.id)">
																		<span>Recomprar produto</span>
																	</a>
																</div>
																<div>
																	<a :href="product.return" class="text-small-link" title="Clique para devolver o produto">
																		<span>Devolver produto</span>
																	</a>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div v-else>
													<div v-if="keyProduto > 2">
														<div class="content-box nowrap-xs row-flex-align bottom-margin-medium js-more-products hidden">
															<div class="div-img">
																<img :src="product.image" alt="Imagem do produto" width="80" height="80" class="text-x-small">
															</div>
															<div class="left-margin-small">
																<a :href="product.href_product" class="text-dark-opacity cursor-pointer">
																	<span v-text="limitText(product.name, 18)" class="text-medium" :title="product.name"></span>
																</a>
																<div v-if="product.itens_kit">
																	<div class="listing-more-status margin-kit">
																		<label class="kit-products">
																			<i class="fa-solid fa-chevron-right text-small-link"></i>
																			<span class="text-small-link" v-text="'{{ view_more_kit_products }}'"></span>
																			<div class="listing-kit rounded-small background-light-gray box-shadow-dark">
																				<div v-for="(itemKit, itemKitKey) in product.itens_kit" :key="itemKitKey" class="timeline-item bottom-margin-x-small">
																					<div class="middle-xs">
																						<span class="text-small text-gray" v-text="'Descrição:'"></span>
																						<span class="text-small text-dark-opacity" v-text="limitText(itemKit.descricao, 18)" :title="itemKit.descricao"></span>
																					</div>
																					<div class="middle-xs">
																						<span class="text-small text-gray " v-text="'Quantidade:'"></span>
																						<span class="text-small text-dark-opacity" v-text="itemKit.quantidade"></span>
																					</div>
																				</div>
																			</div>
																		</label>
																	</div>
																</div>
																<div v-if="typeof futuragrade_status !== 'undefined' && futuragrade_status">
																	<div class="top-margin-x-small">
																		<div v-if="typeof product.color_description !== 'undefined' && product.color_description">
																			<span class="text-small text-gray" v-text="product.color_template_description + ':'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.color_description"></span>
																		</div>
																		<div v-if="typeof product.size_description !== 'undefined' && product.size_description">
																			<span class="text-small text-gray" v-text="product.size_template_description + ':'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.size_description"></span>
																		</div>
																		<div v-if="typeof product.specification_description !== 'undefined' && product.specification_description">
																			<span class="text-small text-gray" v-text="product.specification_template_description + ':'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.specification_description"></span>
																		</div>
																	</div>
																</div>
																<div class="totalsUnit">
																	<div v-if="product.pontos > 0">
																		<div class="quantityFidelity">
																			<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.quantity + ' Unid.'"></span>
																		</div>
																		<div class="pointsFidelity">
																			<span class="text-small text-gray" v-text="'{{ column_pontos }}'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.pontos"></span>
																		</div>
																	</div>
																	<div v-else>
																		<div class="quantity">
																			<span class="text-small text-gray" v-text="'{{ text_quantity }}'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="product.quantity + ' Unid.'"></span>
																		</div>
																		<div class="price">
																			<span class="text-small text-gray" v-text="'R$'"></span>
																			<span class="text-small text-dark-opacity text-bold" v-text="transformPrice(product.price)"></span>
																		</div>
																	</div>
																</div>
																<div v-if="product.brinde">
																	<span class="text-gray text-small" v-text="'{{ text_gift }}'"></span>
																	<span class="text-dark-opacity text-bold text-small" v-text="limitText(product.brinde.product_name, 18)" :title="product.brinde.product_name"></span>
																</div>
																<div class="flex top-margin-x-small">
																	<div v-if="fidelity == false" class="right-padding-small responsive-right-return">
																		<a href="#" class="text-small-link js-product-reorder" :data-product-id="product.id" :data-product-qty="product.quantity" :data-product-size="product.size_id" :data-product-specification="product.specification_id" title="Clique para recomprar o produto" @click.prevent="reorderProduct(product.id)">
																			<span>Recomprar produto</span>
																		</a>
																	</div>
																	<div>
																		<a :href="product.return" class="text-small-link" title="Clique para devolver o produto">
																			<span>Devolver produto</span>
																		</a>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div v-if="lista.products.length > 3">
												<div class="top-margin-medium">
													<a href="#" @click.prevent="showProducts()" title="Clique para ver mais produtos" v-if="showProducts" class="text-small-link cursor-pointer linkShowMore" v-text="'Ver mais produtos'"></a>
												</div>
												<div class="top-margin-medium">
													<a href="#" @click.prevent="showProducts()" title="Clique para ver menos produtos" class="text-small-link cursor-pointer linkHideProducts hidden" v-text="'Ver menos produtos'"></a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xs-12 col-md-6 no-padding left-padding-medium responsive-left">

							<template v-if="schedule_infos.is_futura">
								<schedule-customer
									class="top-margin-medium"
									:has-order-schedule="schedule_infos.hasOrderSchedule"
									:schedule="schedule_infos.scheduledInfo"
								>
									<base-button v-if="schedule_infos.hasOrderSchedule" apperance="cancel" square size="small" title="Clique para cancelar seu agendamento" @click.native="showCancelScheduleModal = true">Cancelar</base-button>
									<base-button v-else apperance="neutral-white" square size="small" title="Clique para agendar um horário" @click.native="showForm = true">Agendar horário</base-button>
								</schedule-customer>

								<schedule-customer-select  
									v-if="showForm" 
									:order-id="order_id"
									:show-form="showForm" 
									@callback="callbackCreateForm" 
									@setinfos="callbackScheduledInfos"
								></schedule-customer-select>
							</template>

							<div v-if="comments" class="top-margin-medium">
								<div class="row-flex-align">
									<span class="text-medium text-gray" v-text="'{{ text_comment }}'"></span>
									<i class="fa-solid fa-comment-dots text-dark-opacity left-padding-small"></i>
								</div>
								<div class="top-margin-x-small">
									<span class="text-small text-dark-opacity text-bold" v-text="'{{ comments }}'"></span>
								</div>
							</div>
							<div v-if="typeof nfe_info !== 'undefined'" class="top-margin-medium">
								<div class="row-flex-align">
									<span class="text-medium text-gray" v-text="'{{ text_access_key }}'"></span>
									<i class="fa-regular fa-copy text-dark-opacity left-padding-small cursor-pointer copy-code" @click="copyNfeKey(nfe_info[0].chave_acesso)" title="Copiar chave de acesso"></i>
								</div>
								<div class="top-margin-x-small">
									<span class="text-small text-dark-opacity text-bold word-break" v-text="nfe_info[0].chave_acesso"></span>
								</div>
								<div class="buttons-order-info flex-start top-margin-small">
									<div class="resize-responsive width-button-nfe">
										<base-button apperance="neutral-white" square size="medium" :href="nfe_info[0].link_danfe" title="Clique para baixar a DANFE">
											<span class="text-dark-opacity">
												<i class="fa-solid fa-download text-dark-opacity"></i>
												NFE
											</span>
										</base-button>
									</div>
									<div class="resize-responsive width-button-nfe">
										<base-button apperance="neutral-white" square size="medium" :href="nfe_info[0].link_xml" title="Clique para baixar o XML">
											<span class="text-dark-opacity">
												<i class="fa-solid fa-download text-dark-opacity"></i>
												XML
											</span>
										</base-button>
									</div>
									<div class="resize-responsive width-button-nfe">
										<base-button apperance="neutral-white" square size="medium" :href="link_see_nfe" title="Clique para consultar NFE">
											<span class="text-dark-opacity">
												<i class="fa-solid fa-magnifying-glass text-dark-opacity"></i>
												NFE
											</span>
										</base-button>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		{% if column_right %}
			<div class="hidden-md-down col-md-3">
				{{ column_right }}
			</div>
		{% endif %}
	</div>

	{# MODAL PIX #}
	<base-modal v-if="showModal" :title="payment_comment ? 'Instruções para pagamento' : 'QR Code Pix'" class="js-box-confirmation" size="medium" @close="onClose">
		<template v-if="payment_comment">
			<div class="flex center-xs middle-xs horizontal-padding-medium">
				<div v-if="itaushopline" class="itaushopline">
					<a :href="itaushopline" target="_blank" v-text="'Boleto itaushopline'" class="text-medium-link text-bold"></a>
				</div>

				<template v-else>
					<span class="text-medium text-left text-dark-opacity top-margin-small width-total" v-text="payment_commentTitle"></span>
					<span class="text-medium text-left text-dark-opacity top-margin-small width-total" v-text="payment_comment"></span>
					<span class="text-medium text-left text-dark-opacity top-margin-small width-total" v-text="payment_commentFooter"></span>
				</template>
				<base-button square apperance="neutral-black" title="Fechar" size="medium" class="top-margin-small" title="Copiar código pix" @click.native="onClose">
					Fechar instruções
				</base-button>
			</div>
		</template>
		<template v-else>
			<div class="text-center">
				<template v-if="payment_pix.link_qrcodeurl">
					<img src="data:image/png;base64, {{ payment_pix.link_qrcodeurl }}" class="js-imgQr" height="300" width="300" alt="QR code" title="QR code"/>
				</template>
				<span class="hidden text-small text-dark-opacity text-bold visible-block top-margin-large js-copy-content" v-text="payment_pix.link_qrcode"></span>
				<template v-if="payment_pix.payment_code === 'getnet'">
					<template v-if="showLoading">
						<div class="flex gap-1 center-xs middle-xs bottom-margin-medium">
							<img :src="'assets/img/loading-black.svg'" width="20" height="20"/>
							<span class="text-small text-dark">Atualizando</span>
						</div>
					</template>
					<template v-else>
						<div class="flex-col center-xs bottom-margin-medium top-margin-medium" v-if="showPaidMsg">
							<span class="text-small text-bold text-dark-opacity">Pagamento Processado</span>
						</div>
						<div class="flex-col center-xs bottom-margin-medium" v-if="showErrorReloadPix">
							<span class="text-small text-bold text-dark-opacity">Ocorreu um erro ao tentar atualizar o pix, tente novamente.</span>
						</div>
						<div class="flex-col center-xs gap-1 middle-xs bottom-margin-medium" v-if="!showPaidMsg && !showErrorReloadPix">
							<span class="text-small text-bold text-dark-opacity">O tempo para você pagar acaba em:</span>
							<span v-text="displayMinute + ':' + displaySeconds"></span>
						</div>
					</template>
				</template>
			</div>
			<div class="flex gap-2 center-xs" v-if="!showPaidMsg">
				<base-button v-if="!showLoading && !showErrorReloadPix" apperance="neutral-black" square size="medium" class="search-instruction js-copy-action width-qrCode-btn" title="Copiar código pix" v-text="'{{ text_copy_code }}'" @click.native="copyCode(payment_pix.link_qrcode)"></base-button>
				<base-button v-if="showBtnRealod" apperance="neutral-black" square size="medium" class="search-instruction js-copy-action width-qrCode-btn" title="Reload Pix" v-text="'Atualizar pix'" @click.native="forceReload()"></base-button>
			</div>
		</template>
	</base-modal>

	{# Modal Confirm/Cancel Order #}
	<base-modal v-if="showModalCancel" title="Confirmação do cancelamento do pedido" class="" size="medium" @close="modalCancelOrder()">
		<div class="text-medium text-center text-dark-opacity bottom-margin-medium">
			<p>Confirmar o cancelamento não apagará seu pedido, mas cancelará todos os itens permanentemente e a ação não poderá ser desfeita, tem certeza de que deseja continuar?</p>
		</div>
		<div class="flex gap-2 center-xs">
			<base-button apperance="confirm" square size="medium" class="" title="Confirmar" @click.native="setCancelSituation()">Confirmar</base-button>
			<base-button apperance="cancel" square size="medium" class="" title="Cancelar" @click.native="modalCancelOrder()">Cancelar</base-button>
		</div>
	</base-modal>

	{# Modal Cancel Schedule #}
	<base-modal v-if="showCancelScheduleModal" title="Cancelamento do agendamento" size="medium" @close="showCancelScheduleModal = false">
		<div class="text-medium text-center text-dark-opacity bottom-margin-medium">
			<p>Confirmar o cancelamento não apagará seu pedido, mas cancelará o horário agendado. Tem certeza de que deseja continuar?</p>
		</div>
		<div class="flex gap-2 center-xs">
			<base-button apperance="confirm" square size="medium" class="" title="Confirmar" @click.native="handleScheduledStatus()">Confirmar</base-button>
			<base-button apperance="cancel" square size="medium" class="" title="Cancelar" @click.native="showCancelScheduleModal = false">Cancelar</base-button>
		</div>
	</base-modal>


</section>
{{footer}}

{# Necessário para passagem de dados em VueJS  #}
<script type="text/javascript">
	const DATA = {{ dataVue|json_encode() }};
</script>
