{% extends "main.html" %} {% block title %} Upload {% endblock %} {% block
content %}

<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
  <form
          action="/upload/catalog"
          method="post"
          enctype="multipart/form-data"
          x-data="{ file: '' }"
  >
    <fieldset class="grid">
      <h3>Catalog Import</h3>
      <label role="button" class="secondary" x-show="!file">
        Choose File
        <input
                type="file"
                name="file"
                x-model="file"
                style="display: none"
                required
        />
      </label>
      <input type="submit" value="Upload" x-show="file" />
      <input type="reset" value="Cancel" x-show="file" />
    </fieldset>
  </form>

  <form
          id="vetcove-history-upload"
          enctype="multipart/form-data"
          hx-post="/upload/vetcove/history"
          hx-target="#upload-results"
          x-data="{ file: '' }"
          x-on:htmx:response-error="$dispatch('notice', {type: 'error', text: 'Unknown error'})"
  >
    <h3>Vetcove Item History</h3>

    <label role="button"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="!file">
      Choose File
      <input
              type="file"
              name="file"
              x-model="file"
              style="display: none"
              required
      />
    </label>
    <input type="submit" value="Upload"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="file" />
    <input type="reset" value="Cancel"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="file" />
  </form>

  <form
          id="vetcove-items-upload"
          enctype="multipart/form-data"
          hx-post="/upload/vetcove/items"
          hx-target="#upload-results"
          x-data="{ file: '' }"
          x-on:htmx:response-error="$dispatch('notice', {type: 'error', text: 'Unknown error'})"
  >
    <h3>Vetcove Items</h3>

    <label role="button"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="!file">
      Choose File
      <input
              type="file"
              name="file"
              x-model="file"
              style="display: none"
              required
      />
    </label>
    <input type="submit" value="Upload"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="file" />
    <input type="reset" value="Cancel"
           class="mb-2 me-2 rounded-lg bg-english-violet px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
           x-show="file" />
  </form>

  <div id="upload-results"></div>
</div>

{% endblock %}