{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

<div class="container">
  <div class="page-order">

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

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

      <div id="order-details">
        <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 }}" class="{% cycle 'odd', 'even' %}">
              <td class="product-item">
                {{ line_item.title | link_to: line_item.product.url }}
                {% if line_item.fulfillment %}
                <div class="note">
                  {{ 'customer.order.fulfilled' | t }}  {{ line_item.fulfillment.created_at | date: format: 'short' }}
                  {% 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 class="sku note">{{ line_item.sku }}</td>
              <td class="money">{{ line_item.price | money }}</td>
              <td class="quantity">{{ 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 colspan="4">{{ 'customer.order.subtotal' | t }}:</td>
              <td class="price">{{ order.subtotal_price | money }}</td>
            </tr>   

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

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

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

      <div id="order-address" class="row">
        <div id="order-payment" class="col-md-6 col-sm-12">
          <h2>{{ 'customer.order.billing_address' | t }}</h2>
          <div class="order-status"><span class="note">{{ 'customer.order.payment_status' | t }}:</span> <span class="status status_{{ order.financial_status }}">{{ order.financial_status }}</span></div>
          <address class="order-address clearfix">
            <div class="author">{{ order.billing_address.name }}</div>
            <div class="email">{{ order.billing_address.company }}</div> 
            <div class="address">{{ order.billing_address.street }}{% if order.billing_address.city != empty %}, {{ order.billing_address.city }}{% endif %}{% if order.billing_address.province != empty %}, {{ order.billing_address.province }}{% endif %}</div> 
            <div class="country">{% if order.billing_address.country != empty %}{{ order.billing_address.country }}{% endif %}</div>
            <div class="phone-number">{{ order.billing_address.phone }}</div> 
          </address>
        </div>

        {% if order.shipping_address %}
        <div id="order_shipping" class="col-md-6 col-sm-12">
          <h2>{{ 'customer.order.shipping_address' | t }}</h2>
          <div class="order-status"><span class="note">{{ 'customer.order.fulfillment_status' | t }}:</span> <span class="status status_{{ order.fulfillment_status }}">{{ order.fulfillment_status }}</span></div>

          <address class="order-address">
            <div class="author">{{ order.shipping_address.name }}</div>
            <div class="email">{{ order.shipping_address.company }}</div> 
            <div class="address">{{ order.shipping_address.street }}{% if order.shipping_address.city != empty %}, {{ order.shipping_address.city }}{% endif %}{% if order.shipping_address.province != empty %}, {{ order.shipping_address.province }}{% endif %}</div>
            <div>{% if order.shipping_address.country != empty %}{{ order.shipping_address.country }}{% endif %}</div>
            <div class="phone-number">{{ order.shipping_address.phone }}</div> 
          </address>

        </div>
        {% endif %}
      </div>

    </div>

  </div>
</div>