{%- comment -%}
  Account home: signed-in strip, order history as hairline rows, default
  address. Marketing-site account system (bs-account.css).
{%- endcomment -%}
{{ 'bs-account.css' | asset_url | stylesheet_tag }}

<div class="acct acct-account">
  <section class="acct-head">
    <div class="acct-container">
      <p class="acct-kicker">{{ 'customer.account.store_title' | t }}</p>
      <h1 class="acct-title">{{ 'customer.account.title' | t }}</h1>
    </div>
  </section>
  <section class="acct-wrap">
    <div class="acct-container">

      <div class="acct-me">
        <span class="acct-me__who"><span>{{ 'customer.account.signed_in_as' | t }}&nbsp;</span>{{ customer.name }}</span>
        <span class="acct-me__who"><span>{{ customer.email }}</span></span>
        <div class="acct-me__actions">
          <a class="acct-btn" href="{{ routes.account_logout_url }}">{{ 'customer.log_out' | t }}</a>
        </div>
      </div>

      <div class="acct-sec">
        <h2>{{ 'customer.orders.title' | t }}</h2>

        {% paginate customer.orders by 20 %}
          {%- if customer.orders.size > 0 -%}
            <div class="acct-orders">
              {%- for order in customer.orders -%}
                <div class="acct-line">
                  <div>
                    <div class="acct-line__label">
                      {{ order.created_at | time_tag: format: 'date' }}
                      &middot; {{ order.financial_status_label }}
                      &middot; {{ order.fulfillment_status_label }}
                    </div>
                    <div class="acct-line__value">
                      <a href="{{ order.customer_url }}" aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}">{{ order.name }}</a>
                      &nbsp;<span class="mono">{{ order.total_price | money_with_currency }}</span>
                    </div>
                  </div>
                  <div class="acct-line__act">
                    <a class="acct-btn" href="{{ order.customer_url }}" aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}">{{ 'customer.orders.view' | t }}</a>
                  </div>
                </div>
              {%- endfor -%}
            </div>
          {%- else -%}
            <p class="acct-empty">{{ 'customer.orders.none' | t }}</p>
          {%- endif -%}

          {%- if paginate.pages > 1 -%}
            {%- if paginate.parts.size > 0 -%}
              <nav class="acct-pagination" role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
                <ul role="list">
                  {%- if paginate.previous -%}
                    <li>
                      <a href="{{ paginate.previous.url }}" aria-label="{{ 'general.pagination.previous' | t }}">
                        <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
                        </svg>
                      </a>
                    </li>
                  {%- endif -%}

                  {%- for part in paginate.parts -%}
                    <li>
                      {%- if part.is_link -%}
                        <a href="{{ part.url }}" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</a>
                      {%- else -%}
                        {%- if part.title == paginate.current_page -%}
                          <span aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</span>
                        {%- else -%}
                          <span>{{ part.title }}</span>
                        {%- endif -%}
                      {%- endif -%}
                    </li>
                  {%- endfor -%}

                  {%- if paginate.next -%}
                    <li>
                      <a href="{{ paginate.next.url }}" aria-label="{{ 'general.pagination.next' | t }}">
                        <svg aria-hidden="true" focusable="false" viewBox="0 0 10 6">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
                        </svg>
                      </a>
                    </li>
                  {%- endif -%}
                </ul>
              </nav>
            {%- endif -%}
          {%- endif -%}
        {% endpaginate %}
      </div>

      <div class="acct-sec">
        <h2>{{ 'customer.account.details' | t }}</h2>
        <div class="acct-address">
          {{ customer.default_address | format_address }}
        </div>
        <a class="acct-btn" href="{{ routes.account_addresses_url }}">
          {{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})
        </a>
      </div>

    </div>
  </section>
</div>