{% extends "base.html" %}

{% block content %}
  <div class="form-wrapper">
    <form
      id="form"
      hx-swap="outerHTML"
      hx-post="/upload"
      hx-encoding="multipart/form-data"
      class="column-container"
    >
      <div class="cat-img-wrapper">
        <img
          class="cat-img"
          src="https://api.thecatapi.com/v1/images/search?size=small&format=src"
        />
      </div>
      <input
        type="file"
        id="file"
        name="file"
        data-multiple-caption="{count} files selected"
        multiple
      />
      <label for="file">Select Files</label>

      <input type="submit" value="Get Link~" />
      <p id="cat-fact">{{ fact }}</p>
      <progress
        id="progress"
        class="htmx-indicator"
        value="0"
        max="100"
      ></progress>
    </form>
    <script src="/scripts/loading_progress.js"></script>
  </div>
{% endblock content %}