{%- comment -%}
  Single order: line items as hairline rows, a quiet totals ledger, then the
  billing / shipping columns. Marketing-site account system (bs-account.css).
{%- endcomment -%}
{{ 'bs-account.css' | asset_url | stylesheet_tag }}

<div class="acct acct-order">
  <svg style="display:none">
    <symbol id="icon-discount" viewBox="0 0 12 12">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7 0h3a2 2 0 012 2v3a1 1 0 01-.3.7l-6 6a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4l6-6A1 1 0 017 0zm2 2a1 1 0 102 0 1 1 0 00-2 0z" fill="currentColor"/>
    </symbol>
  </svg>

  <section class="acct-head">
    <div class="acct-container">
      <p class="acct-kicker"><a href="{{ routes.account_url }}">{{ 'customer.account.store_title' | t }}</a></p>
      <h1 class="acct-title">{{ 'customer.order.title' | t: name: order.name }}</h1>
      {%- assign order_date = order.created_at | time_tag: format: "date_at_time" -%}
      <p class="acct-sub">{{ 'customer.order.date_html' | t: date: order_date }}</p>
      {%- if order.cancelled -%}
        {%- assign cancelled_at = order.cancelled_at | time_tag: format: "date_at_time" -%}
        <p class="acct-sub">{{ 'customer.order.cancelled_html' | t: date: cancelled_at }}<br>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason_label }}</p>
      {%- endif -%}
    </div>
  </section>

  <section class="acct-wrap">
    <div class="acct-container">
      <a class="acct-back" href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a>

      <div class="acct-items">
        {%- for line_item in order.line_items -%}
          <div class="acct-line">
            <div>
              <div class="acct-line__label">
                {%- if line_item.sku != blank -%}{{ line_item.sku }} &middot; {% endif -%}
                {{ line_item.quantity }} &times; {{ line_item.final_price | money }}
              </div>
              <div class="acct-line__value">
                {%- if line_item.url != blank -%}
                  <a href="{{ line_item.url }}">{{ line_item.title }}</a>
                {%- else -%}
                  {{ line_item.title }}
                {%- endif -%}
              </div>
              {%- assign property_size = line_item.properties | size -%}
              {%- unless line_item.selling_plan_allocation == nil and property_size == 0 and line_item.product.has_only_default_variant -%}
                <div class="acct-line__note">
                  {%- unless line_item.product.has_only_default_variant -%}
                    <span>{{ line_item.variant.title }}</span>
                  {%- endunless -%}
                  {%- unless line_item.selling_plan_allocation == nil -%}
                    <span>{{ line_item.selling_plan_allocation.selling_plan.name }}</span>
                  {%- endunless -%}
                  {%- if property_size != 0 -%}
                    {%- for property in line_item.properties -%}
                      {%- assign property_first_char = property.first | slice: 0 -%}
                      {%- if property.last != blank and property_first_char != '_' -%}
                        <span>
                          {{ property.first }}:&nbsp;
                          {%- if property.last contains '/uploads/' -%}
                            <a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                          {%- else -%}
                            {{ property.last }}
                          {%- endif -%}
                        </span>
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                </div>
              {%- endunless -%}

              {%- if line_item.line_level_discount_allocations != blank -%}
                <div class="acct-line__note" aria-label="{{ 'customer.order.discount' | t }}">
                  {%- for discount_allocation in line_item.line_level_discount_allocations -%}
                    <span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</span>
                  {%- endfor -%}
                </div>
              {%- endif -%}

              {%- if line_item.fulfillment -%}
                <div class="acct-line__note">
                  {%- assign created_at = line_item.fulfillment.created_at | time_tag: format: 'date' -%}
                  <span>{{ 'customer.order.fulfilled_at_html' | t: date: created_at }}</span>
                  <span>
                    {{ line_item.fulfillment.tracking_company }}
                    {%- if line_item.fulfillment.tracking_number -%} #{{ line_item.fulfillment.tracking_number }}{%- endif -%}
                  </span>
                  {%- if line_item.fulfillment.tracking_url -%}
                    <span><a href="{{ line_item.fulfillment.tracking_url }}">{{ 'customer.order.track_shipment' | t }}</a></span>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
            <div class="acct-line__figure">
              {%- if line_item.original_line_price != line_item.final_line_price -%}
                <s>{{ line_item.original_line_price | money }}</s><br>
              {%- endif -%}
              {{ line_item.final_line_price | money }}
              {%- if line_item.unit_price_measurement -%}
                <small>
                  {{ line_item.unit_price | money }}
                  <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                  {%- if line_item.unit_price_measurement.reference_value != 1 -%}{{ line_item.unit_price_measurement.reference_value }}{%- endif -%}
                  {{ line_item.unit_price_measurement.reference_unit }}
                </small>
              {%- endif -%}
            </div>
          </div>
        {%- endfor -%}
      </div>

      <div class="acct-totals">
        <div>
          <span>{{ 'customer.order.subtotal' | t }}</span>
          <span>{{ order.line_items_subtotal_price | money }}</span>
        </div>
        {%- if order.cart_level_discount_applications != blank -%}
          {%- for discount_application in order.cart_level_discount_applications -%}
            <div>
              <span>{{ 'customer.order.discount' | t }} <span class="acct-totals__sub">{{ discount_application.title }}</span></span>
              <span>-{{ discount_application.total_allocated_amount | money }}</span>
            </div>
          {%- endfor -%}
        {%- endif -%}
        {%- for shipping_method in order.shipping_methods -%}
          <div>
            <span>{{ 'customer.order.shipping' | t }} <span class="acct-totals__sub">{{ shipping_method.title }}</span></span>
            <span>{{ shipping_method.price | money }}</span>
          </div>
        {%- endfor -%}
        {%- for tax_line in order.tax_lines -%}
          <div>
            <span>{{ 'customer.order.tax' | t }} <span class="acct-totals__sub">{{ tax_line.title }} {{ tax_line.rate | times: 100 }}%</span></span>
            <span>{{ tax_line.price | money }}</span>
          </div>
        {%- endfor -%}
        {%- if order.total_duties -%}
          <div>
            <span>{{ 'customer.order.total_duties' | t }}</span>
            <span>{{ order.total_duties | money }}</span>
          </div>
        {%- endif -%}
        <div class="acct-totals__grand">
          <span>{{ 'customer.order.total' | t }}</span>
          <span>{{ order.total_price | money_with_currency }}</span>
        </div>
      </div>

      <div class="acct-cols">
        <div class="acct-sec">
          <h2>{{ 'customer.order.billing_address' | t }}</h2>
          <p class="acct-status">{{ 'customer.order.payment_status' | t }}: <strong>{{ order.financial_status_label }}</strong></p>
          <div class="acct-address">
            {{ order.billing_address | format_address }}
          </div>
        </div>
        <div class="acct-sec">
          <h2>{{ 'customer.order.shipping_address' | t }}</h2>
          <p class="acct-status">{{ 'customer.order.fulfillment_status' | t }}: <strong>{{ order.fulfillment_status_label }}</strong></p>
          <div class="acct-address">
            {{ order.shipping_address | format_address }}
          </div>
        </div>
      </div>
    </div>
  </section>
</div>