<!-- sections/main-account.liquid -->
{{ 'hdt-customer.css' | asset_url | stylesheet_tag }}
{%- style -%}#shopify-section-{{section.id}}{--section-pt:{{section.settings.padding_top}}px;--section-pb:{{section.settings.padding_bottom}}px;--section-prate:{{section.settings.padding_rate}}}{%- endstyle -%}

<div timeline hdt-reveal="slide-in" class="hdt-main-account hdt-section-spacing hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-container">
    <div class="hdt-customer hdt-customer-account hdt-row-grid">
      {%- render 'account-sidebar' -%}
      <div class="hdt-account-content" timeline hdt-reveal="slide-in"> 
        {%- assign customer_name = customer.name | default: customer.default_address.name | default: customer.email -%}
        <p class="hdt-account-hello">{{ 'customer.account.hello_html' | t: name: customer_name, link: routes.account_logout_url }}</p>
        <p style="margin:2rem 0;" class="hdt-s-text"><strong>{{ 'customer.orders.title' | t }}</strong></p>
        {%- if customer.orders.size != 0 -%}
          {%- paginate customer.orders by 20 -%}
              <table role="table" class="hdt-table-order order-history">
                <caption class="sr-only">{{ 'customer.orders.title' | t }}</caption>
                <thead role="rowgroup">
                  <tr role="row">
                    <th id="ColumnOrder" scope="col" role="columnheader">{{ 'customer.orders.order_number' | t }}</th>
                    <th id="ColumnDate" scope="col" role="columnheader">{{ 'customer.orders.date' | t }}</th>
                    <th id="ColumnPayment" scope="col" role="columnheader">{{ 'customer.orders.payment_status' | t }}</th>
                    <th id="ColumnFulfillment" scope="col" role="columnheader">{{ 'customer.orders.fulfillment_status' | t }}</th>
                    <th id="ColumnTotal" scope="col" role="columnheader">{{ 'customer.orders.total' | t }}</th>
                  </tr>
                </thead>
                <tbody role="rowgroup">
                  {%- for order in customer.orders -%}
                    <tr role="row">
                      <td
                        id="RowOrder"
                        role="cell"
                        headers="ColumnOrder"
                        data-label="{{ 'customer.orders.order_number' | t }}"
                      >
                        <a href="{{ order.customer_url }}" aria-label="{{ 'customer.orders.order_number_link' | t: number: order.name }}">
                          {{ order.name }}
                        </a>
                      </td>
                      <td headers="RowOrder ColumnDate" role="cell" data-label="{{ 'customer.orders.date' | t }}">
                        {{ order.created_at | time_tag: format: 'date' }}
                      </td>
                      <td headers="RowOrder ColumnPayment" role="cell" data-label="{{ 'customer.orders.payment_status' | t }}">
                        <span class="hdt-order-financial{% if order.financial_status_label contains 'Paid' %} hdt-paid{% else %} hdt-unpaid{% endif %}">{{ order.financial_status_label }}</span>
                      </td>
                      <td headers="RowOrder ColumnFulfillment" role="cell" data-label="{{ 'customer.orders.fulfillment_status' | t }}">
                        <span class="hdt-order-fullfillment{% if order.fulfillment_status_label contains 'Fulfilled' %} hdt-fulfilled{% else %} hdt-unfulfilled{% endif %}">{{ order.fulfillment_status_label }}</span>
                      </td>
                      <td headers="RowOrder ColumnTotal" role="cell" data-label="{{ 'customer.orders.total' | t }}">
                        {{ order.total_price | money_with_currency }}</td>
                    </tr>
                  {%- endfor -%}
                </tbody>
              </table>
              {%- if paginate.pages > 1 -%}{%- render 'pagination', paginate: paginate, anchor: '', section_id: section.id , pagination_type: 'links', paginate_pos: 'center', dis_pagination: 50 -%}{%- endif -%}
          {%- endpaginate -%}
        {%- else -%}
          <div class="hdt-form__message hdt-d-flex hdt-items-center hdt-shopify-message">
            <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13" class="hdt-inline-block">
              <path d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z" fill="currentColor" stroke="white" stroke-width="0.7"></path>
              <path d="M5.53271 8.66357L9.25213 4.68197" stroke="white"></path>
              <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white"></path>
            </svg>
            <a href="{% if cart.item_count > 0 %}/checkout{% else %}{{ routes.all_products_collection_url | sort_by: 'best-selling' }}{% endif %}">{{ 'customer.account.make_order' | t }}</a><span>{{ 'customer.account.none' | t }}</span>
          </div>
        {%- endif -%}
        <div style="margin:2rem 0;" class="hdt-s-text"><p><strong>{{ 'customer.account.details' | t }}</strong></p></div>
        <div class="hdt-table-res-df">   
          <table class="hdt-table-infos">
            <tbody>
              <tr>
                <td><strong>{{ 'customer.addresses.name' | t }}</strong></td>
                <td data-label="{{ 'customer.addresses.name' | t }}">{{ customer_name }}</td>
              </tr>
              <tr>
                <td><strong>{{ 'customer.addresses.email' | t }}</strong></td>
                <td data-label="{{ 'customer.addresses.email' | t }}">{{ customer.default_address.email | default: customer.email }}</td>
              </tr>
              
              {%- if customer.default_address != nil -%}
                <tr>
                  <td><strong>{{ 'customer.addresses.address1' | t }}</strong></td>
                  <td data-label="{{ 'customer.addresses.address1' | t }}">{{ customer.default_address.address1 }}</td>
                </tr>
                {%- if customer.default_address.address2 != "" -%}
                <tr>
                  <td><strong>{{ 'customer.addresses.address2' | t }}</strong></td>
                  <td data-label="{{ 'customer.addresses.address2' | t }}">{{ customer.default_address.address2 }}</td>
                </tr>
                {%- endif -%}
                {%- if customer.default_address.city != blank -%}
                <tr>
                  <td><strong>{{ 'customer.addresses.country' | t }}</strong></td>
                  <td data-label="{{ 'customer.addresses.country' | t }}">{{ customer.default_address.city }}, {% if customer_address.province_code %}{{ customer.default_address.province_code }}, {% endif %}{{ customer.default_address.country }}</td>
                </tr>
                {%- endif -%}
                {%- if customer.default_address.zip != blank -%}
                <tr>
                  <td><strong>{{ 'customer.addresses.zip' | t }}</strong></td>
                  <td data-label="{{ 'customer.addresses.zip' | t }}">{{ customer.default_address.zip }}</td>
                </tr>
                {%- endif -%}
                {%- if customer.default_address.phone != blank -%}
                <tr>
                  <td><strong>{{ 'customer.addresses.phone' | t }}</strong></td>
                  <td data-label="{{ 'customer.addresses.phone' | t }}">{{ customer.default_address.phone }}</td>
                </tr>
                {%- endif -%}
              {%- endif -%}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "t:sections.main-account.name",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ]
}
{% endschema %}
