{% if orders %}

  <div class="subscription-order-items">

    {% for order in orders %}
      <article class="subscription-order-item">

        <div class="subscription-order-main">
          <span class="subscription-order-icon">
            <i class="bi bi-receipt-cutoff"></i>
          </span>

          <div>
            <small>{{ column_order_id }}</small>
            <strong>
              <a href="{{ order.view }}" target="_blank" rel="noopener">
                #{{ order.order_id }}
              </a>
            </strong>
          </div>
        </div>

        <div class="subscription-order-detail">
          <small>{{ column_status }}</small>
          <strong>{{ order.status }}</strong>
        </div>

        <div class="subscription-order-detail">
          <small>{{ column_total }}</small>
          <strong>{{ order.total }}</strong>
        </div>

        <div class="subscription-order-detail">
          <small>{{ column_date_added }}</small>
          <strong>{{ order.date_added }}</strong>
        </div>

        <a href="{{ order.view }}"
           target="_blank"
           rel="noopener"
           class="subscription-order-view"
           aria-label="View order #{{ order.order_id }}">
          <i class="bi bi-box-arrow-up-right"></i>
        </a>

      </article>
    {% endfor %}

  </div>

{% else %}

  <div class="subscription-partial-empty">
    <span>
      <i class="bi bi-receipt"></i>
    </span>

    <h3>No Subscription Orders</h3>
    <p>{{ text_no_results }}</p>
  </div>

{% endif %}

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