BrickTracker/templates/instructions/download.html

<div class="container">
  {% if error %}<div class="alert alert-danger" role="alert"><strong>Error:</strong> {{ error }}.</div>{% endif %}
  <div class="row">
    <div class="col-12">
      <form method="POST" action="{{ url_for('instructions.do_download') }}">
        <div class="card mb-3">
          <div class="card-header">
            <h5 class="mb-0"><i class="ri-download-line"></i> Download instructions from Rebrickable</h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label for="download-set" class="form-label">Set number (only one)</label>
              <input type="text" class="form-control" id="download-set" name="download-set" placeholder="107-1 or 1642-1 or ..." value="{{ set }}">
            </div>
          </div>
          <div class="card-footer text-end">
            <button type="submit" class="btn btn-primary"><i class="ri-search-line"></i> Search</button>
          </div>
        </div>
      </form>
      {% if instructions %}
        <div class="card mb-3">
          <div class="card-header">
            <h5 class="mb-0"><i class="ri-checkbox-line"></i> Select instructions to download</h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <div id="download-fail" class="alert alert-danger d-none" role="alert"></div>
              <div id="download-complete"></div>
              <h5 class="border-bottom">Available Instructions</h5>
              <div id="download-files">
                {% for alt_text, href in instructions %}
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="instruction-{{ loop.index }}" data-download-href="{{ href }}" data-download-alt="{{ alt_text }}" autocomplete="off">
                    <label class="form-check-label" for="instruction-{{ loop.index }}">{{ alt_text }}</label>
                  </div>
                {% endfor %}
              </div>
            </div>
            <hr>
            <div class="mb-3">
              <p>
                Progress <span id="download-count"></span>
                <span id="download-spinner" class="d-none">
                  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                  <span class="visually-hidden" role="status">Loading...</span>
                </span>
              </p>
              <div id="download-progress" class="progress" role="progressbar" aria-label="Download an instructions file progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                <div id="download-progress-bar" class="progress-bar" style="width: 0%"></div>
              </div>
              <p id="download-progress-message" class="text-center d-none"></p>
            </div>
          </div>
          <div class="card-footer text-end">
            <span id="download-status-icon" class="me-1"></span><span id="download-status" class="me-1"></span><button id="download" type="button" class="btn btn-primary"><i class="ri-download-line"></i> Download selected files</button>
          </div>
        </div>
        {% include 'instructions/socket.html' %}
      {% endif %}
    </div>
  </div>
</div>