{{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>

    {# SEARCH BAR #}
    <div class="rounded-large background-dark-gray box-shadow-dark col-xs-12 col-md-8 top-margin-medium content-listing">
      <div class="loader-content">
        <div v-if="orders || !data" class="flex middle-xs between-xs">
            <h1 class="text-h1-title text-dark">{{ heading_title }}</h1>   
          <div class="search-bar-desk">
            <base-search-order @callbacksearch="(value, bool, bool2)=>setFilter(value, bool, bool2)" v-model="inputValue" ref="search">
            </base-search-order>
          </div>
          <button v-if="searchBar" @click="changeSearch" type="button" class="btn-search-open cursor-pointer text-dark-opacity btn-base-context-small search-bar-mob">
            <i class="fas fa-search" aria-hidden="true"></i>
          </button>
          <button v-else @click="changeSearch" type="button" class="btn-search-open cursor-pointer text-dark-opacity btn-base-context-small search-bar-mob">
            <i class="fa-solid fa-xmark"></i>
          </button>
          <base-search-order v-show="!searchBar" class="search-bar-mob" v-model="inputValue" @callbacksearch="(value, bool, bool2)=>setFilter(value, bool, bool2)" ref="search2">
          </base-search-order>       
        </div>

        <div v-else class="flex middle-xs bottom-padding-medium between-xs">
          <h1 class="text-h1-title text-dark">{{ heading_title }}</h1>   
        </div>

        {# OPTION DATE #}
        <div v-if="orders || !data" class="search-options" :class="loader ? 'loader-card' : ''">   
            <div class="options-date">       
              <label class="label-date">
                <i class="fa-solid fa-sliders text-dark-opacity right-margin-small slider-date-icon"></i>
                <select @change="(e)=>setDate(e.target.value)" ref="date" class="select-date">
                  <option v-for="(date, index) in dates" v-text="date.name" :value="date.id"></option>         
                </select>
              </label>
            </div>
            <div>
              <span v-if="textResults" v-text="'{{ heading_title }}'+ ':' " class="text-medium text-gray"></span>
              <span v-else v-text="'{{ text_results }}'+ ':' " class="text-medium text-gray"></span>
              <span v-text="allResults" class="text-medium text-dark-opacity text-bold"></span>
            </div>
        </div>

        <div v-if="orders" :class="loader ? 'loader-card' : ''">        
         <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 rounded-small 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="height: 44px;"
                        >
                      </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; height: 44px;"
                        >
                      </base-button>
                    </div>
                  </div>
              </div>     
            </base-listing>
          </div>
          {# PAGINATION #}
          <div v-if="newPagination" class="top-padding-medium top-margin-medium">
            <div class="row">
              <div class="col-xs-12">
                <list-pagination
                  :pagination="pagination"
                  :current-Page="currentPage"
                  :limit="limit"
                  @callback="(e)=>page(e)"     
                ></list-pagination>
              </div>
            </div>
          </div>
          <div v-else class="top-padding-medium top-margin-medium">
              {{ pagination }}
          </div>
        </div> 
        {# EMPTY ORDER #}
        <div v-else-if="!orders && data" 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 text-medium"
            style="height: 44px; line-height: 44px;"
          >
          </base-button>                   
        </div>
        {# EMPTY SEARCH #}
        <div v-else-if=" !orders && !data" class="flex flex-row center-xs background-white rounded-large box-shadow-light horizontal-padding-medium" :class="loader ? 'loader-card' : ''">
          <span class="full-width text-center text-dark-opacity text-medium top-margin-x-large" v-text="'{{text_empty_order_search}}'"></span>   
          <base-button
            apperance="neutral-black"
            square
            size="medium"
            v-text="'{{text_order_search}}'"
            @click.native="clearSearch"
            class="margin-large text-medium"
            style="height: 44px; line-height: 44px;"
          >
          </base-button>                   
        </div>
      </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>