{{header}}
<section class="container-fluid order-list" id="root">
  {{breadcrumbs}}
  <div class="row">
    <div class="col-xs-12 col-md-4 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>

    <div class="rounded-large background-dark-gray box-shadow-dark col-xs-12 col-md-8 top-margin-medium content-listing">
      <div class="flex middle-xs bottom-padding-medium">
        <h1 class="text-h1-title text-dark">{{ heading_title }}</h1>       
      </div>

      <div v-if="orders">
        <div v-for="(order, index) in orders">
          <base-listing
           :icon="'fa-solid fa-chevron-right'"
           :showicon="showIcon" 
           :subtitle="'{{text_order_id}}: '"
           :subtitlevalue="order.order_id"
           :subtitlesecond="order.status + ': '"
           :subtitlesecondvalue="order.date_added"
            title-size="medium"
            :border-status-color="orderStatus(order.type_status)"
           > 
            <div class="content-listing-card">     
                <div class="content-listing-product flex relative">
                  <div class="flex col-md-8 content-center padding-x-small">
                    {# PICTURE #}           
                    <div class="img-listing right-margin-medium">
                      <img :src="order.products_slice[0].image" alt="Imagem do produto" class="text-x-small">
                    </div>
                    {# DESCRIPTION PRODUCT #}  
                    <div class="flex-column">
                      <a :href="order.products_href[0]">
                        <span v-text="limitText(order.products_slice[0].name, 18)" class="text-medium"></span>
                      </a>
                      <div class="flex-column top-margin-x-small bottom-margin-x-small">
                         <div class="flex">
                          <span v-text="'{{text_quantidade}}'" class="right-margin-x-small text-medium"></span>
                          <span class="text-medium text-dark-opacity text-bold right-margin-small" v-text="order.products_slice[0].quantity+' Unid.'"></span>
                         </div> 
                        <label class="top-margin-x-small text-medium">R$ <span class="text-dark-opacity text-bold text-medium" v-text="order.products_slice[0].price"></span></label>
                      </div>
                      {# MORE PRODUCTS #}
                      <div v-if="order.products_slice.length > 1" class="listing-more-products top-margin-small">
                        <label class="more-products">
                          <i class="fa-solid fa-chevron-right text-small-link"></i> 
                          <span class="text-small-link" v-text="'{{text_mais_produtos}}'"></span>
                            <div class="listing-products background-light-gray box-shadow-dark">
                              <div v-for="(product, index) in order.products_slice" :key="index" v-if="index > 0" class="products">
                                <img :src="product.image" alt="Imagem do produto" class="text-x-small">
                                <div class="flex-column left-margin-small">
                                  <a :href="order.products_href[index]">
                                    <span class="text-x-small" v-text="limitText(product.name, 18)"></span>
                                  </a>
                                  <div class="flex">
                                    <span class="text-x-small right-margin-x-small" v-text="'{{text_quantidade }}'"></span>
                                    <span class="text-x-small text-dark-opacity text-bold right-margin-small" v-text="product.quantity+' Unid.'"></span>
                                  </div>
                                  <label class="text-x-small">R$ <span class="text-x-small text-dark-opacity text-bold" v-text="product.price"></span></label>
                                </div>
                              </div>
                            </div> 
                        </label>               
                      </div>
                    </div>               
                  </div>               
                  {# TOTAL #}
                  <div class="flex-column top-margin-small col-md-4 padding-x-small">
                    <div class="flex-column" v-if="order.total_pontos > 0">
                      <div class="flex content-center">
                        <span class="text-medium text-gray" v-text="'{{ column_total_pontos }}'"></span>
                        <i class="fas fa-receipt left-margin-small text-dark-opacity"></i>
                      </div>
                      <span class="top-margin-x-small text-medium text-dark-opacity text-bold" v-text="order.total_pontos"></span>
                    </div> 
                    <div v-else> 
                      <div class="flex content-center bottom-margin-x-small">
                        <span v-text="'{{text_total_paid}}'" class="text-dark-opacity text-bold text-medium"></span>
                        <i class="fa-solid fa-money-check-dollar left-margin-small text-dark-opacity" style="transform: scale(1.2);"></i> 
                      </div>
                      <div class="flex-column">  
                        <div v-for="(total, index) in order.total_order" :key="index" class="bottom-margin-x-small flex between-xs" v-if="total.code === 'shipping' || total.code === 'total'">
                          <span v-text="total.code === 'shipping' ? '{{text_entrega}}' : '{{text_total}}'" class="text-medium"></span>
                          <span class="text-dark-opacity text-bold text-medium" v-text="limitText(total.text, 15)"></span>
                        </div>
                      </div>
                    </div>              
                  </div>
                </div>    
                {# PAYMENT/SHIPPING #}
                <div class="content-listing-especifications row">
                  <div class="flex-column top-margin-medium between-xs cold-md-8 padding-x-small">
                    <div class="flex content-center"> 
                      <div class="flex-column">
                         <div class="flex content-center">
                          <label v-text="'{{text_shipping_method}}'"></label>
                          <i class="fa-solid fa-truck left-margin-small text-dark-opacity"></i> 
                         </div>  
                        <span class=" text-medium text-dark-opacity text-bold top-margin-x-small" v-text="limitText(order.full_order.shipping_method, 45)"></span>
                      </div>  
                    </div>
                    <div class="flex content-center top-margin-small">    
                      <div class="flex-column">  
                        <div class="flex content-center">
                          <label v-text="'{{text_payment_method}}'"></label>
                          <i class="fas fa-dollar-sign left-margin-small text-dark-opacity"></i>
                        </div>    
                        <span class="text-medium text-dark-opacity text-bold top-margin-x-small" v-text="limitText(order.full_order.payment_method, 45)"></span>   
                      </div>
                    </div>
                  </div> 
                   {# BUTTONS #}
                  <div class="content-listing-buttons col-xs-12 col-md-4 padding-x-small">
                    <base-button
                      apperance="neutral-white"
                      square
                      size="small"
                      v-text="'{{ text_order_view }}'"
                      :href="order.href"
                      style=""
                      >
                    </base-button>
                    <base-button
                      v-if="order.fidelity == false"
                      apperance="neutral-black"
                      square
                      size="small"
                      v-text="'{{ text_order_repurchase }}'"
                      :href="order.reorder"
                      style="margin-top: 16px;"
                      >
                    </base-button>
                  </div>
                </div>
            </div>     
          </base-listing>
        </div>
        <div class="top-padding-medium top-margin-medium">
            {{ pagination }}
        </div>
      </div>

      <div v-else class="flex flex-row center-xs background-white rounded-large box-shadow-light horizontal-padding-medium">
          <span class="full-width text-center text-dark-opacity text-medium top-margin-x-large" v-text="'{{text_empty_order_title}}'"></span>   
              <base-button
                apperance="neutral-black"
                square
                size="medium"
                v-text="'{{text_empty_order_button}}'"
                :href="'{{home}}'"
                class="margin-large"
              >
            </base-button>                   
      </div>
    </div>
    
    <div v-if="{{column_right}}" class="hidden-md-down col-md-3">
      {{ column_right }}
    </div>
  </div>

</section>
{{footer}}

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