{{ 'pages.css' | asset_url | stylesheet_tag }}
  
<div id="admin_header" class="page-heading">
  <h2 class="title">{{ 'customer.order.title' | t: name: order.name }}</h2>
</div>

{%- if order.cancelled -%}
  <div id="order_cancelled" class="flash notice">
    {%- assign cancelled_at = order.cancelled_at | time_tag: format: 'date_at_time' -%}
    <h5 id="order_cancelled_title">{{ 'customer.order.cancelled_html' | t: date: cancelled_at }}</h5>
    <span class="note">{{ order.cancel_reason }}</span>
  </div>
{%- endif -%}

{%- assign order_date = order.created_at | date: "%B %d, %Y %I:%M%p" -%}
<div class="note order_date">{{ 'customer.order.date_html' | t: date: order_date }} </div>

<div id="order_address" class="group">
  <div id="order_payment">
    <h5 class="order_section_title">{{ 'customer.order.billing_address' | t }}</h5>
    <p><span class="note">{{ 'customer.order.payment_status' | t }}  </span> <span class="status_{{ order.financial_status }}">{{ order.financial_status_label }}</span></p>
    <div class="address note">
      <p>{{ order.billing_address.name }}</p>
      <p>{{ order.billing_address.company }}</p>
      <p>{{ order.billing_address.street }}</p>
      <p>{{ order.billing_address.city }}, {{ order.billing_address.province }}</p>
      <p>{{ order.billing_address.country }} {{ order.billing_address.zip }}</p>
      <p>{{ order.billing_address.phone }}</p>
    </div>
  </div>

  {%- if order.shipping_address -%}
    <div id="order_shipping">
      <h5 class="order_section_title">{{ 'customer.order.shipping_address' | t }}</h5>
      <p><span class="note">{{ 'customer.order.fulfillment_status' | t }}</span> <span class="status_{{ order.fulfillment_status }}">{{ order.fulfillment_status_label }}</span></p>
      <div class="address note">
        <p>{{ order.shipping_address.name }}</p>
        <p>{{ order.shipping_address.company }}</p>
        <p>{{ order.shipping_address.street }}</p>
        <p>{{ order.shipping_address.city }}, {{ order.shipping_address.province }}</p>
        <p>{{ order.shipping_address.country }} {{ order.shipping_address.zip }}</p>
        <p>{{ order.shipping_address.phone }}</p>
      </div>
    </div>
  {%- endif -%}
</div>

<table id="order_details">
  <thead>
    <tr>
      <th>{{ 'customer.order.product' | t }}</th>
      <th>{{ 'customer.order.sku' | t }}</th>
      <th>{{ 'customer.order.price' | t }}</th>
      <th class="center">{{ 'customer.order.quantity' | t }}</th>
      <th class="total">{{ 'customer.order.total' | t }}</th>
    </tr>
  </thead>
  <tbody>
    {%- for line_item in order.line_items -%}
      <tr id="{{ line_item.id }}" class="{% cycle 'odd', 'even' %}">
        <td class="product">
          <div class="d-grid" style="grid-template-columns: 90px 1fr;">
            <div class="product-image">
              {%- render 'image-style', image: line_item.product.featured_image -%}
            </div>
            <div class="product-title">
              {{ line_item.title | link_to: line_item.product.url }}
              {%- if line_item.fulfillment -%}
                <div class="note">
                  {%- assign created_at = line_item.fulfillment.created_at | date: "%b %d" -%}
                  {{ 'customer.order.fulfilled_at_html' | t: date: created_at }}
                  {%- if line_item.fulfillment.tracking_number -%}
                    <a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number }}</a>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </div>
        </td>
        <td class="sku note">{{ line_item.sku }}</td>
        <td class="money">{{ line_item.price | money }}</td>
        <td class="quantity cente">{{ line_item.quantity }}</td>
        <td class="total money">{{ line_item.quantity | times: line_item.price | money }}</td>
      </tr>
    {%- endfor -%}
  </tbody>
  <tfoot>
    <tr class="order_summary note">
      <td class="label" colspan="4">{{ 'customer.order.subtotal' | t }}</td>
      <td class="total money">{{ order.subtotal_price | money }}</td>
    </tr>

    {%- for discount in order.discounts -%}
      <tr class="order_summary discount">
        <td class="label" colspan="4">{{ discount.code }} {{ 'customer.order.discount' | t }}</td>
        <td class="total money">{{ discount.savings | money }}</td>
      </tr>
    {%- endfor -%}

    {%- for shipping_method in order.shipping_methods -%}
      <tr class="order_summary note">
        <td class="label" colspan="4">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }}):</td>
        <td class="total money">{{ shipping_method.price | money }}</td>
      </tr>
    {%- endfor -%}

    {%- for tax_line in order.tax_lines -%}
      <tr class="order_summary note">
        <td class="label" colspan="4">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):</td>
        <td class="total money">{{ tax_line.price | money }}</td>
      </tr>
    {%- endfor -%}

    <tr class="order_summary order_total">
      <td class="label" colspan="4">{{ 'customer.order.total' | t }}:</td>
      <td class="total money">{{ order.total_price | money }}</td>
    </tr>
  </tfoot>
</table>
