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

<div class="content">
  {% if files %}
  <h2>Files</h2>
  <div class="columns is-multiline">
    {% for image in files %}
    <div class="column" id="image-{{ image.id }}">
      <div class="card">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <p class="image" style="width:64px">
                <a href="{{ image.url }}" target="_blank" data-lightbox="{{ image.url }}">
                  <img class="has-ratio" src="{{ image.icon }}">
                </a>
              </p>
            </div>
            <div class="media-content">
              <div class="content">
                <p><b>File Key:</b> {{ image.attachment.file-key }}</p>
                <p><b>File Size:</b> {{ image.attachment.file-size }}</p>
              </div>
            </div>
            <div class="media-right">
              <button class="delete"
                      hx-confirm="Delete {{ image.id }} - Are you sure?"
                      hx-delete="/upload/{{ image.id }}"
                      hx-include="[name='file-form']"
                      hx-swap="outerHTML swap:1s"
                      hx-target="#image-{{ image.id }}"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <hr>
  {% endif %}

  <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="file-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 class="columns is-centered">
    <div class="column is-1">
      <div class="field">
        <div class="control">
          <button class="button is-primary"
                  form="file-form"
                  type="submit">Process</button>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}