{% extends "layouts/default.html" %}
{% block title %}YDK Upload{% endblock %}
{% block content %}
<form name="ydk-form" id="ydk-form"
      method="post" enctype="multipart/form-data">
  {{ token | safe }}
  <input type="hidden" name="MAX_FILE_SIZE" value="100000">
</form>

<div class="container">
  <h1 class="title">YDK Uploader</h1>
  <p class="subtitle">
    Upload deck text or file
  </p>

  <div style="display: flex;">
    <div style="flex: 1;">
      <div class="field">
        <label class="label" for="filename">Deck Name</label>
        <div class="control">
          <input class="input"
                 form="ydk-form"
                 id="filename"
                 name="filename"
                 type="text">
        </div>
      </div>
      
      <div class="field">
        <label class="label" for="query">Deck Listing</label>
        <div class="control">
          <textarea class="textarea"
                    form="ydk-form"
                    id="query"
                    name="query"
                    placeholder="My Name&#10;#main&#10;#extra&#10;!side"></textarea>
        </div>
      </div>
    </div>

    <div class="divider is-vertical"><b>OR</b></div>

    <div style="flex: 1;">
      <div class="columns is-flex is-centered is-vcentered">
        <div class="column is-half">
          <div class="field">
            <div id="file-js" class="file has-name is-boxed is-fullwidth">
              <label class="file-label">
                <input class="file-input" type="file" name="files[]" id="files" multiple="multiple" form="ydk-form">
                <span class="file-cta">
                  <span class="file-icon">
                    <i class="fas fa-upload"></i>
                  </span>
                  <span class="file-label">
                    Choose a file&hellip;
                  </span>
                </span>
                <span class="file-name">
                  No file uploaded
                </span>
              </label>
            </div>
            {% include "file-js.html" :target "#file-js" %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="columns is-centered">
    <div class="column is-1">
      <div class="field">
        <div class="control">
          <button class="button is-primary"
                  form="ydk-form"
                  type="submit">Process</button>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}