{% do view.registerAssetBundle('Solspace\\Freeform\\Resources\\Bundles\\FormattingTemplates\\Tailwind4LightBundle') %}

{% import "freeform/_templates/formatting/tailwind-4-light/_row.twig" as rowMacro %}

{# Render the opening form tag #}
{{ form.renderTag({
  attributes: {
    form: { class: "freeform-form", "data-freeform-tailwind": true },
    row: { class: "flex gap-x-2 -mx-2 mb-4" },
    novalidate: true,
  },
  buttons: {
    attributes: {
      container: { class: "flex flex-wrap -mx-7.5 mb-4" },
      column: { class: "mx-6" },
      buttonWrapper: {},
      submit: { class: "rounded-md mx-1.5 px-5 py-2 text-md font-semibold text-white bg-indigo-600 hover:bg-indigo-500" },
      back: { class: "rounded-md mx-1.5 px-5 py-2 text-md font-normal text-gray-900 bg-gray-200 hover:bg-gray-100" },
      save: { class: "rounded-md mx-1.5 px-5 py-2 text-md font-normal text-gray-900 bg-gray-300 hover:bg-gray-200" },
    },
  },
  fields: {
    "@global": {
      attributes: {
        container: { class: "w-full px-2" },
        label: { class: "block text-sm/6 mb-1 font-medium text-gray-900" },
        input: {
          class: "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6",
        },
        instructions: { class: "text-sm text-gray-500 -mt-1.5 mb-1" },
        error: { class: "mt-1 text-sm text-red-600" },
      },
    },
    ":required": {
      attributes: {
        label: { "+class": "freeform-required" },
        input: { required: "" },
      },
    },
    ":errors": {
      attributes: {
        input: { "+class": "outline-1 -outline-offset-1 outline-red-600" },
      },
    },
    "@checkboxes, @radios, @opinion-scale, @rating, @cards": {
      attributes: {
        container: { tag: "fieldset" },
        label: { tag: "legend" },
      },
    },
    "@checkboxes, @radios": {
      attributes: {
        input: {
          "-class": "block w-full px-3 py-1.5 rounded-md text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6",
          "+class": "appearance-none size-4 border border-gray-300 checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
        },
        optionLabel: { class: "block text-sm/6 font-medium text-gray-900" },
      },
    },
    "@radios": {
      attributes: {
        input: {
          "+class": "relative rounded-full before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden",
        },
        optionLabel: { class: "ml-2" },
      },
    },
    "@checkboxes": {
      attributes: {
        input: {
          "+class": "col-start-1 row-start-1 rounded-sm bg-white indeterminate:border-indigo-600 indeterminate:bg-indigo-600",
        },
      },
    },
    "@opinion-scale": {
      attributes: {
        optionLabel: { "=class": "relative flex items-center justify-between cursor-pointer bg-gray-50 px-3 py-1.5 rounded-md text-base text-gray-900 text-sm outline-1 -outline-offset-1 outline-gray-300 rounded-md peer-checked:outline-2 peer-checked:outline-indigo-600 hover:bg-gray-100" },
        input: { "-class": "appearance-none block w-full" },
      },
    },
    "@cards": {
      attributes: {
        optionLabel: { "=class": "relative flex flex-col gap-1 h-full items-left justify-start cursor-pointer bg-gray-50 pb-3 rounded-md text-base text-gray-900 text-sm outline-1 -outline-offset-1 outline-gray-300 rounded-md peer-checked:outline-2 peer-checked:outline-indigo-500 hover:bg-gray-100" },
        input: { "-class": "appearance-none block w-full" },
      },
      cardAttributes: {
        card: { class: "group min-w-0 mb-2 sm:mb-0" },
        image: { class: "mb-1 rounded-t-md" },
        content: { class: "flex items-center justify-between px-3" },
        cardLabel: { "=class": "text-lg font-bold" },
        cardDescription: { class: "text-xs px-3" },
        cardMetadata: { class: "list-disc list-outside text-xs pl-6 pr-3" },
      }
    },
    "@rating": {
      attributes: {
        optionLabel: { "+class": "mr-1" },
      },
    },
    "@checkbox": {
      attributes: {
        label: {
          class: "block text-sm/6 font-medium text-gray-900",
        },
        input: {
          "-class": "block w-full px-3 py-1.5 rounded-md text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6",
          "+class": "col-start-1 row-start-1 rounded-sm appearance-none size-4 rounded-full border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600",
        },
      },
    },
    "@dropdown": {
      attributes: {
        input: {
          "-class": "block px-3 placeholder:text-gray-400",
          "+class": "col-start-1 row-start-1 appearance-none pr-8 pl-3",
        },
      },
    },
    "@multiple-select": {
      attributes: {
        input: {
          "-class": "placeholder:text-gray-400",
          "+class": "h-30 overflow-auto",
        },
      },
    },
    "@file-dnd": {
      attributes: {
        input: {
          "-class": "block w-full outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600",
          "+class": "justify-center rounded-md !border border-dashed !border-gray-900/25",
        },
      },
    },
    "@file": {
      attributes: {
        label: {
          "=class": "freeform-upload-btn inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm text-gray-900 font-normal bg-white rounded-md cursor-pointer ring-1 ring-gray-300 ring-inset hover:bg-gray-50",
        },
        input: {
          "=class": "freeform-file-upload-input absolute inset-0 w-0 h-0 opacity-0 cursor-pointer",
        },
      },
    },
    "@table": {
      attributes: {
        label: { "-class": "block" },
        input: { "-class": "appearance-none block w-full" },
      },
    },
    "@group": {
      attributes: {
        container: { "+class": "-mb-4" },
        label: { "-class": "font-medium", "+class": "font-semibold" },
      },
    },
    "@signature": {
      attributes: {
        input: { "=class": "inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm text-gray-900 font-normal bg-white rounded-md cursor-pointer ring-1 ring-gray-300 ring-inset hover:bg-gray-50" },
      },
    },
    "@stripe": {
      attributes: {
        input: { "-class": "rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" },
      },
    },
  },
}) }}

{# Success and error message handling for non-AJAX forms #}
{% if not form.settings.ajax %}
  {% if form.submittedSuccessfully %}
    <div class="rounded-md bg-green-50 p-4 mb-10">
      <div class="flex">
        <div class="shrink-0">
          <svg class="size-6 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
            <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="ml-2">
          <h3 class="text-md font-medium text-green-800">{{ form.successMessage | t('freeform') }}</h3>
        </div>
      </div>
    </div>
  {% endif %}
  {% if form.hasErrors %}
    <div class="rounded-md bg-red-50 p-4 mb-10">
      <div class="flex">
        <div class="shrink-0">
        <svg class="size-6 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
        </svg>
        </div>
        <div class="ml-2">
          <h3 class="text-md font-medium text-red-800">{{ form.errorMessage | t('freeform') }}</h3>
          {% if form.errors|length %}
            <div class="mt-2 text-sm text-red-700">
              <ul role="list" class="list-disc space-y-1 pl-5">
                {% for error in form.errors %}
                  <li>{{ error }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}

{# Render page tabs if multi-page #}
{% if form.pages|length > 1 %}

<nav class="mb-10" aria-label="Progress">
  <ol role="list" class="divide-y divide-gray-300 rounded-md border border-gray-300 sm:flex sm:divide-y-0">
  {% for page in form.pages %}
    <li class="relative sm:flex sm:flex-1"{% if form.currentPage.index == page.index %} aria-current="step"{% endif %}>
      <div class="group flex w-full items-center">
        <span class="flex items-center px-3 sm:px-6 py-2 sm:py-4 text-sm font-medium">
          <span class="flex size-10 shrink-0 items-center justify-center rounded-full {% if form.currentPage.index > page.index %}bg-indigo-600{% elseif form.currentPage.index == page.index %}border-2 border-indigo-600{% else %}border-2 border-gray-300{% endif %}">
          {% if form.currentPage.index > page.index %}
            <svg class="size-6 text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
            </svg>
          {% else %}
            <span class="{{ form.currentPage.index == page.index ? 'border-indigo-600 text-indigo-600 font-semibold' : 'border-gray-300 text-gray-500' }}">{{ page.index + '1' }}</span>
          {% endif %}
          </span>
          <span class="ml-4 text-sm font-medium {% if form.currentPage.index > page.index %}text-gray-900{% elseif form.currentPage.index == page.index %}text-indigo-600 font-semibold{% else %}text-gray-500{% endif %}">{{ page.label }}</span>
        </span>
      </div>
      {% if (page.index + 1) != form.pages.count %}
      <div class="absolute top-0 right-0 hidden h-full w-5 sm:block" aria-hidden="true">
        <svg class="size-full text-gray-300" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
          <path d="M0 -2L20 40L0 82" vector-effect="non-scaling-stroke" stroke="currentcolor" stroke-linejoin="round" />
        </svg>
      </div>
      {% endif %}
    </li>
  {% endfor %}
  </ol>
</nav>
{% endif %}

{# Display form field rows and columns #}
{{ rowMacro.render(form.rows, form) }}

{# Render the closing form tag #}
{{ form.renderClosingTag }}
