{{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">
          <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"
                      v-text="'{{ button_reorder }}'"
                      href="{{ order_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"
                      v-text="'{{ button_return_order }}'"
                      href="{{ link_return }}">
                    </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 line-gray no-padding">
                    <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>
                  <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 v-if=" typeof order_tracking_events !== 'undefined'" class="top-margin-medium">
                        <div v-for="(order_tracking_event, tracking_code) in order_tracking_events" :key="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" v-text="tracking_code"></span>
                          </div>
                          <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>
                      <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="{{ text_pix }}" 
      class="js-box-confirmation"
      size="medium"
      @close="onClose">
      <div class="text-center">
        <div 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"/>
        </div>
        <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>
        <div class="flex gap-2 center-xs">
          <base-button
            apperance="neutral-black"
            square
            size="medium"
            class="search-instruction js-copy-action width-qrCode-btn"
            @click.native="copyCode(payment_pix.link_qrcode)"
            title="Copiar código pix"
            v-text="'{{ text_copy_code }}'"> 
          </base-button>
          <div v-if="payment_pix.payment_code === 'getnet'">
            <base-button
              apperance="neutral-white"
              square
              size="medium"
              class="js-reloadPayment width-qrCode-btn"
              @click.native="reloadPix(order_id)"
              title="Atualizar código pix"
              v-text="'{{ text_reload_pix }}'"> 
            </base-button>
          </div>
          </base-button>
        </div>
      </div>
    </base-modal>
  </section>
{{footer}}
{# Necessário para passagem de dados em VueJS  #}
<script type="text/javascript">
    const DATA = {{ dataVue|json_encode() }};
</script>