{{ header }}

<main id="account-download" class="franklin-account-page franklin-download-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="download-hero">
      <div class="download-hero-content">
        <span class="download-eyebrow">
          <i class="bi bi-cloud-arrow-down-fill"></i>
          Digital Purchases
        </span>

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

        <p>
          Access and download the digital files available from your completed orders.
        </p>
      </div>

      <div class="download-hero-icon" aria-hidden="true">
        <i class="bi bi-folder2-open"></i>
      </div>
    </section>

    <div class="download-layout">

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

        <h2>Your Downloads</h2>

        <p>
          Files linked to eligible orders will appear here when they are ready to download.
        </p>

        <div class="download-info-list">
          <div>
            <i class="bi bi-receipt"></i>
            <span>
              <strong>Order Reference</strong>
              <small>Each file is linked to its original order.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-file-earmark-check"></i>
            <span>
              <strong>File Details</strong>
              <small>Review the file name, size and added date.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-shield-check"></i>
            <span>
              <strong>Secure Access</strong>
              <small>Downloads are available only through your account.</small>
            </span>
          </div>
        </div>

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

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

        <div class="download-list-heading">
          <span class="download-list-heading-icon">
            <i class="bi bi-files"></i>
          </span>

          <div>
            <h2>Available Files</h2>
            <p>Download the files associated with your account orders.</p>
          </div>
        </div>

        {% if downloads %}

          <div class="download-items">
            {% for download in downloads %}
              <article class="download-item">

                <div class="download-item-main">
                  <div class="download-file-icon">
                    <i class="bi bi-file-earmark-arrow-down"></i>
                  </div>

                  <div class="download-file-details">
                    <h3>{{ download.name }}</h3>

                    <div class="download-meta">
                      <span>
                        <i class="bi bi-hash"></i>
                        {{ column_order_id }}: {{ download.order_id }}
                      </span>

                      <span>
                        <i class="bi bi-hdd"></i>
                        {{ download.size }}
                      </span>

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

                <a href="{{ download.href }}"
                   data-bs-toggle="tooltip"
                   title="{{ button_download }}"
                   class="btn btn-primary download-file-button">
                  <i class="bi bi-cloud-arrow-down"></i>
                  <span>{{ button_download }}</span>
                </a>

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

          <div class="download-pagination">
            <div class="download-pagination-links">
              {{ pagination }}
            </div>

            <div class="download-results">
              {{ results }}
            </div>
          </div>

        {% else %}

          <div class="download-empty-state">
            <div class="download-empty-icon">
              <i class="bi bi-folder2-open"></i>
            </div>

            <h3>No Downloads Available</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 }}