<!DOCTYPE html>
<html>
<head>
  <title>Firefox Send</title>
  {{#if dsn}}
  {{> sentry dsn=dsn}}
  {{/if}}
  <script src="/bundle.js"></script>
  <link rel="stylesheet" type="text/css" href="/main.css" />
  <link rel="stylesheet" type="text/css" href="/resources/fontello-24c5e6ad/css/fontello.css" />
  <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
  {{#if trackerId}}
  {{> analytics trackerId=trackerId}}
  {{/if}}
</head>
<body>
  <div id="all">
    <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="" 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>
      </div>
      <div class="send-new" title="Send another file">
        Send another file
      </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" />
      <div class="send-new" title="Send another file">
        Send another file
      </div>
    </div>

  </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>
</div>
<!-- <div class="footer"><img src="/resources/mozilla-logo.jpg"/>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> -->
</body>
</html>