<div id="page-one" hidden>
  <script src="/upload.js"></script>
  <div class="title" data-l10n-id="uploadPageHeader"></div>
  <div class="description">
    <div data-l10n-id="uploadPageExplainer"></div>
    <a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
  </div>
  <div class="upload-window" >
    <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
    <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
    <span id="file-size-msg"><em data-l10n-id="uploadPageSizeMessage"></em></span>
    <form method="post" action="upload" enctype="multipart/form-data">
      <label for="file-upload" id="browse"
              data-l10n-id="uploadPageBrowseButton"></label>
      <input id="file-upload" type="file" name="fileUploaded" />
    </form>
  </div>

  <div id="file-list">
    <table id="uploaded-files">
      <thead>
        <tr>
          <!-- htmllint attr-bans="false" -->
          <th id="uploaded-file" data-l10n-id="uploadedFile"></th>
          <th id="copy-file-list" data-l10n-id="copyFileList"></th>
          <th id="expiry-file-list" data-l10n-id="expiryFileList"></th>
          <th id="delete-file-list" data-l10n-id="deleteFileList"></th>
          <!-- htmllint tag-bans="$previous" -->
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

<div id="upload-progress" hidden="true">
  <div class="title" id="upload-filename"></div>
  <div class="description"></div>
  <!-- progress bar here -->
  <div class="progress-bar" id="ul-progress">
    <div class="percentage">
      <span class="percent-number">0</span>
      <span class="percent-sign">%</span>
    </div>
  </div>
  <div class="upload">
    <div class="progress-text"></div>
    <div id="cancel-upload"
          data-l10n-id="uploadingPageCancel"></div>
  </div>

</div>

<div id="share-link" hidden="true">
  <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
  <div id="share-window">
    <div id="copy-text"></div>
    <div id="copy">
      <input id="link" type="url" value="" readonly/>
      <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
    </div>
    <button id="delete-file" data-l10n-id="deleteFileButton"></button>
    <a class="send-new" data-state="completed" data-l10n-id="sendAnotherFileLink" href="/"></a>
  </div>
</div>

<div id="upload-error" hidden="true">
  <div class="title" data-l10n-id="errorPageHeader"></div>
  <div class="expired-description" data-l10n-id="errorPageMessage"></div>
  <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
  <a class="send-new" data-state="errored" data-l10n-id="sendAnotherFileLink"></a>
</div>