{include file="_partials/head.tpl"}
<link rel="stylesheet" href="/public/assets/account/account.css">

<div class="acc-container">
  <nav class="acc-breadcrumbs" aria-label="Навигация"><a href="/">Главная</a> <span>/</span> <a href="/account">Кабинет</a> <span>/</span> <a href="/account/orders">Заказы</a> <span>/</span> <span>№ {order.number}</span></nav>

  <div class="acc-layout">
    {include file="account/_nav.tpl"}

    <main class="acc-main">
      {include file="account/_flash.tpl"}

      <header class="acc-head">
        <h1 class="acc-head__title">Заказ № {order.number}</h1>
        <p class="acc-head__sub">от {order.date_fmt} · <span class="acc-status acc-status--{order.status}">{order.status_label}</span></p>
      </header>

      <div class="acc-card-box">
        <table class="acc-items">
          <thead>
            <tr><th>Товар</th><th>Цена</th><th>Кол-во</th><th>Сумма</th></tr>
          </thead>
          <tbody>
            [foreach var="items" as="it"]
              <tr>
                <td>
                  <span class="acc-items__title">{it.product_title}</span>
                  [if {it.product_sku}]<span class="acc-items__sku">{it.product_sku}</span>[/if]
                </td>
                <td>{price amount="{it.price}"}</td>
                <td>{it.quantity}</td>
                <td>{price amount="{it.subtotal}"}</td>
              </tr>
            [/foreach]
          </tbody>
        </table>
        <div class="acc-order-total">Итого: <b>{price amount="{order.total}"}</b></div>
      </div>

      <div class="acc-card-box acc-recipient">
        <h3 class="acc-subhead">Получатель</h3>
        <p>{order.customer_name}</p>
        [if {order.customer_phone}]<p>{order.customer_phone}</p>[/if]
        <p>{order.customer_email}</p>
        [if {order.customer_address}]<p>{order.customer_address}</p>[/if]
        [if {order.comment}]<p class="acc-muted">Комментарий: {order.comment}</p>[/if]
      </div>
    </main>
  </div>
</div>

{include file="_partials/foot.tpl"}
