{{ header }}

<main id="account-subscription" class="franklin-account-page franklin-subscription-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="subscription-hero">
      <div class="subscription-hero-content">
        <span class="subscription-eyebrow">
          <i class="bi bi-arrow-repeat"></i>
          Recurring Orders
        </span>

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

        <p>
          Review your Franklin subscriptions, recurring products, current status and subscription history.
        </p>
      </div>

      <div class="subscription-hero-icon" aria-hidden="true">
        <i class="bi bi-calendar2-check"></i>
      </div>
    </section>

    <div class="subscription-layout">

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

        <h2>Your Subscriptions</h2>

        <p>
          Open a subscription to review its products, billing details, next payment date and generated orders.
        </p>

        <div class="subscription-info-list">
          <div>
            <i class="bi bi-calendar-event"></i>
            <span>
              <strong>Next Payment</strong>
              <small>Review the upcoming billing or renewal date.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-receipt"></i>
            <span>
              <strong>Generated Orders</strong>
              <small>View orders created from each subscription.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-clock-history"></i>
            <span>
              <strong>Status History</strong>
              <small>Follow subscription updates and comments.</small>
            </span>
          </div>
        </div>

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

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

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

          <div>
            <h2>Subscription Records</h2>
            <p>Select a subscription to view its complete information.</p>
          </div>
        </div>

        {% if subscriptions %}

          <div class="subscription-card-grid">
            {% for subscription in subscriptions %}
              <article class="subscription-record-card">

                <div class="subscription-record-top">
                  <div>
                    <span class="subscription-record-label">{{ column_subscription_id }}</span>
                    <h3>#{{ subscription.subscription_id }}</h3>
                  </div>

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

                <div class="subscription-description">
                  <i class="bi bi-arrow-repeat"></i>
                  <span>{{ subscription.description }}</span>
                </div>

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

                  <div>
                    <span class="subscription-detail-icon">
                      <i class="bi bi-box"></i>
                    </span>

                    <span>
                      <small>{{ column_product_total }}</small>
                      <strong>{{ subscription.product_total }}</strong>
                    </span>
                  </div>

                  <div>
                    <span class="subscription-detail-icon">
                      <i class="bi bi-calendar3"></i>
                    </span>

                    <span>
                      <small>{{ column_date_added }}</small>
                      <strong>{{ subscription.date_added }}</strong>
                    </span>
                  </div>

                </div>

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

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

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

        {% else %}

          <div class="subscription-empty-state">
            <div class="subscription-empty-icon">
              <i class="bi bi-calendar2-x"></i>
            </div>

            <h3>No Subscriptions Found</h3>
            <p>{{ text_no_subscription }}</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 }}