{{#extend
  "my-account-v2"
  dataBreadcrumbs=my_order.breadcrumbs
  pageClass="page_my-account_new"
  title="My Order"
  pageMyAcc=true
  myAccV2=true
  isLoggedIn=true
  mainClass="my-order"
  switch-vat=true
}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_my-order.css">
<link type="text/css" rel="stylesheet" href="./css/components/energy-efficiency.css">
{{/content}}
{{#content "main"}}
<div class="container">
  <div class="row">
    <div class="col-12">
      {{> my-account/mobile-nav
          menu=my_order.menu
          active-index=1
          page-name=my_order.menu.[1].title
          }}
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="my-order__header">
        <h1 class="my-order__title">Order {{my_order.order.number}}</h1>
        <nav class="linked-order">
          <p class="linked-order__title">Linked to order:</p>
          <ul class="linked-order__list">
            {{#each my_order.order.linkedToOrder}}
            <li class="linked-order__item">
              <a class="link" href="{{link}}">{{number}}</a>
              {{#ifCond @index '<' (math ../my_order.order.linkedToOrder.length '-' 1)}},{{/ifCond}}
            </li>
            {{/each}}
          </ul>
        </nav>
        <div class="order-status {{my_order.order.orderStatus.statusClass}}">
          <i class="{{my_order.order.orderStatus.statusIcon}} icon"></i>
          <span>{{my_order.order.orderStatus.statusTitle}}</span>
        </div>
        <p class="my-order__placed">Order placed on <span class="date">{{my_order.order.orderDate}}</span></p>
        <button class="btn btn-primary btn_full btn--resend-confirmation">Resend confirmation</button>
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="my-order__body">
        {{> notifications notification-page.success text=my_order.notifications.success }}
        {{#each my_order.order.products }}
          {{> my-account/order this }}
        {{/each}}
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="wismo">
        {{> my-account/wismo_order-summary my_order.wismo-order-summary }}
        {{> wismo-payment payment-klarna=true}}
      </div>
    </div>
  </div>
</div>

<div class="account-actions">
  <div class="container">
    <div class="row">
      <div class="col-12">
        {{> my-account/contact-us contacts=my_order.contacts  }}
        <a href="#" class="link-to-orders">
          <span class="icon-wrap">
            <i class="far fa-arrow-left icon icon-back"></i>
          </span>
          Back to My Orders
        </a>
      </div>
    </div>
  </div>
</div>
{{/content}}

{{#content "foot" mode="append"}}
  {{#extend "modal" classMod="modal-energy-efficiency" id="modal-energy-efficiency" title="" fullWidth=true showCloseBtn=true newIconCross=true}}
    {{#content "sections"}}
      <div class="modal-images"></div>
    {{/content}}
  {{/extend}}
  <script defer src="./js/my-account.min.js"></script>
  <script defer src="./js/energy-efficiency.min.js"></script>
{{/content}}
{{/extend}}