<div id="page-one">
  <div class="title">
    Private, Encrypted File Sharing
  </div>
  <div class="description">
    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
  </div>
  <div class="upload-window" >
    <div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
    <div id="upload-text">
      Drop your files here to start uploading
    </div>

    <form method="post" action="upload" enctype="multipart/form-data">
      <label for="file-upload" id="browse" title="Upload file">Select a file on your computer</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 width="35%">File</th>
          <th width="25%">Copy URL</th>
          <th width="21%">Expires in</th>
          <th width="12%">Delete</th>
          <!-- htmllint tag-bans="$previous" -->
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</div>

<div id="upload-progress">
  <div class="title" id="upload-filename">
    Uploading Your File
  </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" title="Cancel Upload">Cancel Upload</div>
  </div>
</div>

<div id="share-link">
  <div class="title">
    This encrypted link will expire after 1 download or in 24 hours
  </div>
  <div id="share-window">
    <div id="copy-text">
      Copy and share the link to send your file:
    </div>
    <div id="copy">
      <input id="link" type="url" value="" readonly/>
      <button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
    </div>
    <button id="delete-file" title="Delete file">Delete file</button>
    <a class="send-new" title="Send another file">
      Send another file
    </a>
  </div>
</div>

<div id="upload-error">
  <div class="title">
    Something went wrong!
  </div>
  <div class="expired-description">
    There has been an error uploading the file.
  </div>
  <img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
  <a class="send-new" title="Send another file">
    Send another file
  </a>
</div>

<div id="unsupported-browser">
  <div class="title">
    Your browser is not supported.
  </div>
  <div class="description">
    Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
  </div>
  <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
    <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
    <div id="dl-firefox-text">Firefox<br><span>Free Download</span></div>
  </a>
  <div class="unsupported-description">
    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
  </div>
</div>