{{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 - 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">
								<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">
					<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>
					<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="{{ 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 #}
		<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>

	</section>
{{footer}}

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