{%macro display_resumable_elements(id, title, help)%}
<div id="{{id}}"
     class="resumable-elements visually-hidden"
     style="background:#D4D4EE;border-radius: 5px;;padding: 1em;border-left: solid #B2B2CC 1px;border-bottom: solid #B2B2CC 2px;margin-top:0.3em;">
  <strong style="line-height: 1.2em;">{{title | title}}</strong>

  <span class="form-text text-muted">{{help | safe}}</span>

  <div id="{{id}}-selected-files"
       class="resumable-selected-files"
       style="display:flex;flex-direction:row;flex-wrap: wrap;justify-content:space-around;gap:10px 20px;">
    <div class="panel panel-info file-display-template visually-hidden">
      <div class="panel-heading filename">The Filename Goes Here!</div>
      <div class="panel-body">
        <ul>
          <li>
            <strong>Name</strong>:
            <span class="filename">the file's name</span></li>

          <li><strong>Size</strong>: <span class="filesize">0 MB</span></li>

          <li>
            <strong>Unique Identifier</strong>:
            <span class="fileuniqueid">brrr</span></li>

          <li>
            <strong>Mime</strong>:
            <span class="filemimetype">text/csv</span></li>
        </ul>
      </div>
    </div>
  </div>

  <a id="{{id}}-browse-button"
     class="resumable-browse-button btn btn-info"
     href="#"
     style="margin-left: 80%;">Browse</a>

  <div id="{{id}}-progress-bar" class="progress visually-hidden">
    <div class="progress-bar"
         role="progress-bar"
         aria-valuenow="60"
         aria-valuemin="0"
         aria-valuemax="100"
         style="width: 0%;">
      Uploading: 60%
    </div>
  </div>

  <div id="{{id}}-cancel-resume-buttons">
    <a id="{{id}}-resume-button"
       class="resumable-resume-button btn btn-info visually-hidden"
       href="#">resume upload</a>

    <a id="{{id}}-cancel-button"
       class="resumable-cancel-button btn btn-danger visually-hidden"
       href="#">cancel upload</a>
  </div>
</div>
{%endmacro%}