{{#extend
  "my-account-v2"
  dataBreadcrumbs=my_orders.breadcrumbs
  pageClass="page_my-account_new"
  title="My Orders"
  pageMyAcc=true
  myAccV2=true
  isLoggedIn=true
  mainClass="my-orders"
}}
{{#content "head" mode="append"}}
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="./css/pages/page_my-orders.css">
{{/content}}
{{#content "notification"}}
<div class="globalMessages">
</div>
{{/content}}
{{#content "main"}}
<div class="container">
  <div class="row">
    <div class="col-12">
      {{> my-account/mobile-nav
      menu=default-store.menu
      active-index=1
      page-name=my_orders.menu.[1].title
      }}
    </div>
  </div>
</div>

<div class="container my-orders__wrap">
  <div class="row">
    <div class="col-12">
      <div class="my-orders__header">
        <h1 class="my-orders__title">My Orders</h1>
        <div class="my-orders__sorts">
          {{> flatpickr-calendar
              textTooltip="Filter by year and month the order was placed"
          }}
          {{> my-account/sort-by }}
        </div>
        {{> my-account/orders-nav
            nav=my_orders.nav
            category=my_orders.nav.[0].title
            }}
      </div>
      {{> my-account/active-orders/list-orders
          title=false
          orders=my_orders.orderList
          isLoadMore=true
          }}
    </div>
  </div>
</div>

{{/content}}
{{#content "foot" mode="append"}}
<script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js" defer></script>
<script src="./js/my-orders.min.js" defer></script>
{{/content}}
{{/extend}}