{{ header }}

<main id="account-reward" class="franklin-account-page franklin-reward-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="reward-hero">
      <div class="reward-hero-content">
        <span class="reward-eyebrow">
          <i class="bi bi-gift-fill"></i>
          Franklin Rewards
        </span>

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

        <p>
          Review your reward-point balance and see how points were earned or used across your Franklin orders.
        </p>
      </div>

      <div class="reward-balance-card">
        <span class="reward-balance-label">{{ text_total }}</span>
        <strong>{{ total }}</strong>
        <small>Available reward points</small>
      </div>
    </section>

    <div class="reward-layout">

      <aside class="reward-info-card">
        <span class="reward-info-icon">
          <i class="bi bi-stars"></i>
        </span>

        <h2>Your Reward Points</h2>

        <p>
          Reward activity linked to your customer account appears here, including order references and point changes.
        </p>

        <div class="reward-info-list">
          <div>
            <i class="bi bi-plus-circle"></i>
            <span>
              <strong>Earn Points</strong>
              <small>Eligible purchases may add points to your account.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-receipt"></i>
            <span>
              <strong>Order References</strong>
              <small>Open linked orders directly from the reward activity.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-clock-history"></i>
            <span>
              <strong>Activity History</strong>
              <small>Review the date, description and point value.</small>
            </span>
          </div>
        </div>

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

      <section class="reward-history-card">

        <div class="reward-history-heading">
          <span class="reward-history-heading-icon">
            <i class="bi bi-list-stars"></i>
          </span>

          <div>
            <h2>Reward Activity</h2>
            <p>Every reward-point transaction connected to your account.</p>
          </div>
        </div>

        {% if rewards %}

          <div class="reward-items">
            {% for reward in rewards %}
              <article class="reward-item">

                <div class="reward-item-main">
                  <span class="reward-item-icon">
                    <i class="bi bi-award"></i>
                  </span>

                  <div class="reward-item-details">
                    <h3>
                      {% if reward.order_id %}
                        <a href="{{ reward.href }}">{{ reward.description }}</a>
                      {% else %}
                        {{ reward.description }}
                      {% endif %}
                    </h3>

                    <div class="reward-item-meta">
                      <span>
                        <i class="bi bi-calendar3"></i>
                        {{ reward.date_added }}
                      </span>

                      {% if reward.order_id %}
                        <span>
                          <i class="bi bi-receipt-cutoff"></i>
                          Order #{{ reward.order_id }}
                        </span>
                      {% endif %}
                    </div>
                  </div>
                </div>

                <div class="reward-points-badge">
                  <span>{{ column_points }}</span>
                  <strong>{{ reward.points }}</strong>
                </div>

              </article>
            {% endfor %}
          </div>

        {% else %}

          <div class="reward-empty-state">
            <div class="reward-empty-icon">
              <i class="bi bi-gift"></i>
            </div>

            <h3>No Reward Activity Found</h3>
            <p>{{ text_no_results }}</p>
          </div>

        {% endif %}

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

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

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}