{{ 'pages.css' | asset_url | stylesheet_tag }}

<div class="page-account">
  <div class="row">
    <div class="col-lg-3 col-12">
      <div id="customer_sidebar">

        <div class="page-heading account-heading">
          <h3 class="title">{{- 'customer.account.details' | t -}}</h3>
        </div>
        <div id="customer_detail" class="group">
          {%- if customer.default_address != nil -%}
            <div class="info">
              <div class="author">{%- render 'svg', type: 'user' -%}{{ customer.first_name }} {{ customer.last_name }}</div>
              <div class="email">{%- render 'svg', type: 'email' -%}{{ customer.email }}</div> 
              {%- if customer.default_address != nil -%}
              <p class="address">{%- render 'svg', type: 'pin' -%} {{ customer.default_address.address1 }}{% if customer.default_address.city != empty and customer.default_address.city != blank %}, {{ customer.default_address.city }}{% endif %}, {% if customer.default_address.country != empty and customer.default_address.country != blank %} {{ customer.default_address.country }}{%- endif -%}</p>
              {%- endif -%}
            </div>
          {%- endif -%}

          <div class="action-bottom">
            <a id="view_address" href="/account/addresses" class="btn btn-1">{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})</a>
            <a href="{{ routes.account_logout_url }}" class="btn btn-2">{{- 'customer.account.logout' | t -}}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-9 col-12">
      <div id="customer_orders">
        {%- if customer.orders.size != 0 -%}
          <div class="page-heading orders-heading">
            <h3 class="title">{{- 'customer.orders.title' | t -}}</h3>
          </div>

          <div class="orders-detail">
            <div class="orders-header">
              <div class="order_number">{{- 'customer.orders.order' | t -}}</div>
              <div class="date">{{- 'customer.orders.date' | t -}}</div>
              <div class="payment_status">{{- 'customer.orders.payment_status' | t -}}</div>
              <div class="fulfillment_status">{{- 'customer.orders.fulfillment_status' | t -}}</div>
              <div class="total">{{- 'customer.orders.total' | t -}}</div>
            </div>
            <div class="orders-body">
              {%- for order in customer.orders -%}
                <div class="order-line {% cycle 'odd', 'even' %}{% if order.cancelled %} cancelled_order{% endif %}">
                  <div>{{ order.name | link_to: order.customer_url }}</div>
                  <div><span class="note">{{ order.created_at | date: "%b %d, %Y" }}</span></div>
                  <div><span class="status_{{ order.financial_status }}">{{ order.financial_status_label }}</span></div>
                  <div><span class="status_{{ order.fulfillment_status }}">{{ order.fulfillment_status_label }}</span></div>
                  <div><span class="total money">{{ order.total_price | money }}</span></div>
                </div>
              {%- endfor -%}
            </div>
          </div>
        {%- else -%}
          <div class="page-heading orders-heading">
            <h3 class="title">{{- 'customer.orders.title' | t -}}</h3>
          </div>
          <div class="alert alert-success">
            <p>{{- 'customer.orders.none' | t -}}</p>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{% comment %} compress {% endcomment %}