<div id="download">
  <script defer src="/download.js"></script>
  <div id="download-page-one">
    <div class="title">
      <span id="dl-file"
            data-filename="{{filename}}"
            data-size="{{sizeInBytes}}"
            data-ttl="{{ttl}}"
            data-l10n-id="downloadFileName"
            data-l10n-args='{{filenameJson}}'></span>
      <span id="dl-filesize"></span>
    </div>
    <div class="description" data-l10n-id="downloadMessage"></div>
    <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
    <div>
      <button id="download-btn" class="btn" data-l10n-id="downloadButtonLabel"></button>
    </div>
  </div>

  <div id="download-progress" hidden="true">
    <div id="dl-title" class="title"></div>
    <div class="description" data-l10n-id="downloadingPageMessage"></div>
    <div class="progress-bar">
      <svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
        <circle r="73" cx="83" cy="83" fill="transparent"/>
        <circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
      </svg>
      <div class="percentage">
        <span class="percent-number"></span>
        <span class="percent-sign">%</span>
      </div>
    </div>
    <div class="upload">
      <div class="progress-text">{{filename}}</div>
    </div>
  </div>

  <div id="upload-error" hidden="true">
    <div class="title" data-l10n-id="errorPageHeader"></div>
    <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
  </div>

  <a class="send-new" data-state="completed" data-l10n-id="sendYourFilesLink" href="/"></a>
</div>