{% extends "layouts/default.html" %}
{% block title %}{_ "Label Maker" _}{% endblock %}
{% block content %}
<form name="label-form" id="label-form"
      method="post" enctype="multipart/form-data"
      onkeydown="return event.key != 'Enter';">
  {{ token | safe }}
</form>

<div class="container">
  <h1 class="title">{_ "Label Maker" _}</h1>

  <div class="content"
       hx-get="/label-maker/instructions"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <hr>

  <div class="columns">
    <div class="column">
      <div class="field">
        <div id="file-js" class="file has-name">
          <label class="file-label">
            <input form="label-form" class="file-input" type="file" name="files[]" id="files" multiple="multiple">
            <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 class="column">
      <div class="field">
        <div class="control">
          <div class="select">
            <select id="class" name="class"
                    form="label-form">
              <option value="">Label Type</option>
              <option selected=selected value="latex-label-avery-5160">Avery 5160</option>
              <option value="latex-label-uline-s-20247">ULINE S-20247</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="field">
        <div class="control">
          <button class="button is-primary"
                  form="label-form"
                  type="submit">Process</button>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}