{% load i18n %}

<section class="container mx-auto max-w-xl grid gap-8">
  {% if form.errors %}
  <div class="toast toast-top toast-end top-24 right-8 z-10">
    <ol class="grid gap-4 max-w-2xl mx-auto">
      {% for field, errors in form.errors.items %}
      <li class="alert alert-soft alert-horizontal alert-error">
        <span class="badge badge-error xl:badge-lg">
          <i data-lucide="x-circle" class="size-4 lg:size-6"></i>
          <span>{{ field }}</span>
        </span>

        <div>{{ errors }}</div>
      </li>
      {% endfor %}
    </ol>
  </div>
  {% endif %}

  <form
    enctype="multipart/form-data"
    method="{{ method|default:'post' }}"
    class="grid gap-4"
  >
    {% if csrf|default_if_none:True %}{% csrf_token %}{% endif %}{{ form }}

    <button type="submit" class="btn btn-primary">{% trans 'Submit' %}</button>
  </form>
</section>

<script>
  // Style containers and labels
  document
    .querySelectorAll("form > div")
    .forEach((e) => e.classList.add("fieldset"));
  document
    .querySelectorAll("form > div > label")
    .forEach((e) => e.classList.add("fieldset-legend"));
  document
    .querySelectorAll("form > div > .helptext")
    .forEach((e) => e.classList.add("fieldset-label"));

  // Style inputs
  document
    .querySelectorAll("form > div > input")
    .forEach((e) => e.classList.add("input", "input-primary", "w-full"));
  document
    .querySelectorAll("form > div > input[type=checkbox]")
    .forEach((e) => {
      e.classList.remove("input", "w-full");
      e.classList.add("checkbox", "checkbox-primary");
    });
  document.querySelectorAll("form > div > input[type=radio]").forEach((e) => {
    e.classList.remove("input", "w-full");
    e.classList.add("radio", "radio-primary");
  });
  document.querySelectorAll("form > div > input[type=file]").forEach((e) => {
    e.classList.remove("input");
    e.classList.add("file-input");
  });
  document
    .querySelectorAll("form > div > textarea")
    .forEach((e) => e.classList.add("textarea", "textarea-primary", "w-full"));
  document
    .querySelectorAll("form > div > select")
    .forEach((e) => e.classList.add("select", "select-primary", "w-full"));
</script>