{% extends 'components/shell.html' %}

{% from 'components/site_section.html' import site_section, site_section_header %}

{% block scripts_extra %}
  <script src="{{ url_for('static', filename='js/resumable.js') }}" defer></script>
  <script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
{% endblock scripts_extra %}

{% block content %}
{% call site_section('upload') %}
<div class="upload-view">
  {{ site_section_header('Upload file') }}
  <form
    id="upload-form"
    class="form"
    action="/api/v1/shares/upload"
    enctype="multipart/form-data"
    method="post"
  > 
    <div class="form__section">
      {% if request.args.get('service') and request.args.get('user') %}
        <input
          class="form__input"
          type="hidden"
          name="service"
          id="service"
          value="{{ request.args.get('service') }}"
        >
        <input
          class="form__input"
          type="hidden"
          name="user"
          id="user"
          value="{{ request.args.get('user') }}"
        >
      {% else %}
        {# <!-- placeholder --> #}
      {% endif %}
    </div>
    <div>
      <label class="form__label" for="title">Title</label>
      <input 
        class="form__input"
        type="text"
        name="title"
        id="title"
        maxlength="50"
        required
      >
      <small class="subtitle">
        example, "February 2020 Rewards"
      </small>
    </div>
    <div>
      <label class="form__label" for="content">Description</label>
      <textarea
        name="content"
        id="content"
        maxlength="5000"
        cols="48"
        rows="4"
        wrap="soft"
      ></textarea>
      <small class="subtitle">
        Specify what the file/archive is, where the original data can be found, include relevant keys/passwords, etc.
      </small>
    </div>
    <ul id="file-list">
    </ul>
    <div class="upload-button" id="upload-button">
      Add files
    </div>
    <div class="form__section">
      <button 
        class="form__button form__button--submit"
        type="submit"
      >
        Finish
      </button>
    </div>
  </form>
  <div id="upload">
  </div>
</div>
{% endcall %}
{% endblock %}
