{% extends "base.html" %}

{% block head %}
  <link rel="stylesheet" type="text/css" href="css/states.css?{{ cachebuster }}"/>
  <script src="js/util.js?{{ cachebuster }}"></script>
  <script src="js/download-landing.js?{{ cachebuster }}"></script>
  <script src="js/upload.js?{{ cachebuster }}"></script>
{% endblock %}

{% block body_attrs %}class="noscript landing"{% endblock %}

{% block body %}
  <div id="download" class="section">
    <h3 class="section_heading">Download</h3>
    <form id="download_form" action="download" method="get">
      <div>
        <label>
          <input type="text" id="download_code_input" name="code" placeholder="Download code"/>
        </label>
      </div>
      <input id="download_button" type="submit" value="Download"/>
    </form>
  </div>
  <noscript>Javascript is required to upload files :(</noscript>
  <div id="uploads_closed_notice" class="section">
    <h4>Uploading is currently closed.</h4>
  </div>
  <div id="upload" class="section">
    <h3 class="section_heading">Upload</h3>
    <div id="message"></div>
    <div>
      <form id="upload_password_form">
        <div>
          <label>
            <input id="upload_password" type="password" placeholder="Password"/>
          </label>
        </div>
        <div>
          <input type="submit" id="submit_upload_password" value="Submit" />
        </div>
      </form>
    </div>
    <div id="upload_controls">
      <div id="upload_settings">
        <div>
          <button id="upload_button">Upload</button>
        </div>
        <div id="lifetime_container">
          <label>
            Keep files for:
            <select id="lifetime">
              <option value="1">1 day</option>
              <option value="7">1 week</option>
              <option value="14" selected>2 weeks</option>
              <option value="30">1 month</option>
              <option value="60">2 months</option>
              <option value="90">3 months</option>
              <option value="180">6 months</option>
              <option value="365">1 year</option>
            </select>
          </label>
        </div>
        <div>
          <input type="text" id="collection_name" placeholder="Collection name"/>
        </div>
      </div>
      <div id="download_code_container">
        <div id="download_code_main">
          <div>Download code: <span id="download_code"></span></div><div class="copy_button"></div>
        </div>
        <div id="copied_message">Link copied!</div>
      </div>
      <div id="progress_container">
        <div id="progress">
          <div id="progress_percentage"></div>
          <div id="progress_size"></div>
          <div id="progress_rate"></div>
          <div id="progress_eta"></div>
        </div>
        <div id="progress_bar"></div>
      </div>
      <table id="file_list">
      </table>
      <label id="file_input_container">
        <input type="file" multiple id="file_input"/>
        <span class="fake_button" id="file_input_message">Select files to upload...</span>
      </label>
    </div>
  </div>
{% endblock %}