{% load i18n %}

<!---->
{% 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">
      <i data-lucide="x-circle" class="size-4 lg:size-6"></i>

      <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 }}

  <!---->
  {% if btn|default_if_none:True %}
  <button type="submit" class="btn btn-primary">{% trans 'Submit' %}</button>
  {% endif %}
</form>

<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", "w-full", "validator"));
  document
    .querySelectorAll("form > div > input[type=checkbox]")
    .forEach((e) => {
      e.classList.remove("input", "w-full");
      e.classList.add("checkbox");
    });
  document.querySelectorAll("form > div > input[type=radio]").forEach((e) => {
    e.classList.remove("input", "w-full");
    e.classList.add("radio");
  });
  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", "w-full", "validator"));
  document
    .querySelectorAll("form > div > select")
    .forEach((e) => e.classList.add("select", "w-full", "validator"));

  // Style error lists
  document
    .querySelectorAll("form > div > .errorlist")
    .forEach((e) => e.classList.add("validator-hint", "text-error", "visible"));
</script>