{{ header }}

<main id="account-order" class="franklin-account-page franklin-orders-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="orders-hero">
      <div class="orders-hero-content">
        <span class="orders-eyebrow">
          <i class="bi bi-bag-check-fill"></i>
          Purchase History
        </span>

        <h1>{{ heading_title }}</h1>

        <p>
          Review your Franklin orders, order status, item count, purchase date and total amount.
        </p>
      </div>

      <div class="orders-hero-icon" aria-hidden="true">
        <i class="bi bi-receipt-cutoff"></i>
      </div>
    </section>

    <div class="orders-layout">

      <aside class="orders-info-card">
        <span class="orders-info-icon">
          <i class="bi bi-box-seam"></i>
        </span>

        <h2>Your Orders</h2>

        <p>
          Open an order to view products, delivery information, payment details and status history.
        </p>

        <div class="orders-info-list">
          <div>
            <i class="bi bi-search"></i>
            <span>
              <strong>Order Details</strong>
              <small>Review every product included in an order.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-arrow-repeat"></i>
            <span>
              <strong>Reorder Products</strong>
              <small>Add eligible products to your cart again.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-clock-history"></i>
            <span>
              <strong>Status History</strong>
              <small>Follow updates recorded against your order.</small>
            </span>
          </div>
        </div>

        <a href="{{ continue }}" class="btn orders-back-button">
          <i class="bi bi-arrow-left"></i>
          {{ button_continue }}
        </a>
      </aside>

      <section class="orders-list-card">

        <div class="orders-list-heading">
          <span class="orders-list-heading-icon">
            <i class="bi bi-list-check"></i>
          </span>

          <div>
            <h2>Order Records</h2>
            <p>Select an order to view its complete information.</p>
          </div>
        </div>

        {% if orders %}

          <div class="orders-card-grid">

            {% for order in orders %}
              <article class="order-record-card">

                <div class="order-record-top">
                  <div>
                    <span class="order-record-label">{{ column_order_id }}</span>
                    <h3>#{{ order.order_id }}</h3>
                  </div>

                  <span class="order-status-badge">
                    <i class="bi bi-circle-fill"></i>
                    {{ order.status }}
                  </span>
                </div>

                <div class="order-record-details">

                  <div>
                    <span class="order-detail-icon">
                      <i class="bi bi-box"></i>
                    </span>
                    <span>
                      <small>{{ column_product_total }}</small>
                      <strong>{{ order.product_total }}</strong>
                    </span>
                  </div>

                  <div>
                    <span class="order-detail-icon">
                      <i class="bi bi-currency-rupee"></i>
                    </span>
                    <span>
                      <small>{{ column_total }}</small>
                      <strong>{{ order.total }}</strong>
                    </span>
                  </div>

                  <div>
                    <span class="order-detail-icon">
                      <i class="bi bi-calendar3"></i>
                    </span>
                    <span>
                      <small>{{ column_date_added }}</small>
                      <strong>{{ order.date_added }}</strong>
                    </span>
                  </div>

                </div>

                <a href="{{ order.view }}"
                   data-bs-toggle="tooltip"
                   title="{{ button_view }}"
                   class="btn order-view-button">
                  <i class="bi bi-eye"></i>
                  {{ button_view }}
                </a>

              </article>
            {% endfor %}

          </div>

          <div class="orders-pagination">
            <div>{{ pagination }}</div>
            <div class="orders-results">{{ results }}</div>
          </div>

        {% else %}

          <div class="orders-empty-state">
            <div class="orders-empty-icon">
              <i class="bi bi-bag-x"></i>
            </div>

            <h3>No Orders Found</h3>
            <p>{{ text_no_results }}</p>

            <a href="{{ continue }}" class="btn btn-primary">
              <i class="bi bi-arrow-left"></i>
              {{ button_continue }}
            </a>
          </div>

        {% endif %}

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}