<div class="accountWrap sectionWrap halfGutter">
  <div class="grid flexGrid gridJustify">
    <div id="orderTable" class="formWrap fullSpan flexItem">
      <h1>{{ 'customer.order.title' | t: name: order.name }} / {{ 'customer.order.date' | t: date: order.created_at | date: "%B %d, %Y %I:%M%p" }}</h1>
      <!--<a href="/account">{{ 'customer.account.return' | t }}</a>-->
      {% if order.cancelled %}
        <div class="errors">
          {% assign cancelled_at = order.cancelled_at | date: "%B %d, %Y %I:%M%p" %}
          <p>{{ 'customer.order.cancelled' | t: date: cancelled_at }}</p>
          <p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}</p>
        </div>
      {% endif %}
      <table>
        <thead>
          <tr>
            <th>{{ 'customer.order.product' | t }}</th>
            <th>{{ 'customer.order.sku' | t }}</th>
            <th>{{ 'customer.order.price' | t }}</th>
            <th>{{ 'customer.order.quantity' | t }}</th>
            <th>{{ 'customer.order.total' | t }}</th>
          </tr>
        </thead>
        <tbody>
          {% for line_item in order.line_items %}
            <tr id="{{ line_item.id }}">
              <td>
                {{ 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: format: 'month_day_year' %}
                    {{ 'customer.order.fulfilled_at' | 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 %}
              </td>
              <td>{{ line_item.sku }}</td>
              <td>{{ line_item.price | money }}</td>
              <td>{{ line_item.quantity }}</td>
              <td>{{ line_item.quantity | times: line_item.price | money }}</td>
            </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">{{ 'customer.order.subtotal' | t }}</td>
            <td>{{ order.subtotal_price | money }}</td>
          </tr>
          {% for discount in order.discounts %}
            <tr class="order_summary discount">
              <td colspan="4">{{ discount.code }} {{ 'customer.order.discount' | t }}</td>
              <td>{{ discount.savings | money }}</td>
            </tr>
          {% endfor %}
          {% for shipping_method in order.shipping_methods %}
            <tr>
              <td colspan="4">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})</td>
              <td>{{ shipping_method.price | money }}</td>
            </tr>
          {% endfor %}
          {% for tax_line in order.tax_lines %}
            <tr>
              <td colspan="4">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)</td>
              <td>{{ tax_line.price | money }}</td>
            </tr>
          {% endfor %}
          <tr>
            <td colspan="4"><strong>{{ 'customer.order.total' | t }}</strong></td>
            <td><strong>{{ order.total_price | money }} {{ order.currency }}</strong></td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="formWrap half flexItem">
      <h2>{{ 'customer.order.billing_address' | t }}</h2>
      <p><strong>{{ 'customer.order.payment_status' | t }}:</strong> {{ order.financial_status_label }}</p>
      <p><strong>{{ order.billing_address.name }}</strong></p>
      <p>
        {% if order.billing_address.company != '' %}
          {{ order.billing_address.company }}<br>
        {% endif %}
        {{ order.billing_address.street }}<br>
        {{ order.billing_address.city }}<br>
        {% if order.billing_address.province != '' %}
          {{ order.billing_address.province }}<br>
        {% endif %}
        {{ order.billing_address.zip | upcase }}<br>
        {{ order.billing_address.country }}<br>
        {{ order.billing_address.phone }}
      </p>
    </div>
    <div class="formWrap half flexItem">
      <h2>{{ 'customer.order.shipping_address' | t }}</h2>
      <p><strong>{{ 'customer.order.fulfillment_status' | t }}:</strong> {{ order.fulfillment_status_label }}</p>
      <p><strong>{{ order.shipping_address.name }}</strong></p>
      <p>
        {% if order.shipping_address.company != '' %}
          {{ order.shipping_address.company }}<br>
        {% endif %}
        {{ order.shipping_address.street }}<br>
        {{ order.shipping_address.city }}<br>
        {% if order.shipping_address.province != '' %}
          {{ order.shipping_address.province }}<br>
        {% endif %}
        {{ order.shipping_address.zip | upcase }}<br>
        {{ order.shipping_address.country }}<br>
        {{ order.shipping_address.phone }}
      </p>
    </div>
  </div>
</div>
