---
sizing:
  '25': 'md:col-span-3'
  '33': 'md:col-span-4'
  '50': 'md:col-span-6'
  '66': 'md:col-span-8'
  '75': 'md:col-span-9'
  '100': 'md:col-span-12'
---

{{ form:create class="w-full" :in="contact_form:handle" }}
    {{ if success }}
        <div class="bg-green-600 text-white p-4 rounded-lg my-5">
            {{ success }}
        </div>
    {{ else }}
        {{ if errors }}
            <ul class="space-y-5 mt-5">
                {{ errors }}
                    <li class="bg-red-600 text-white p-4 rounded-lg">
                        {{ value }}<br>
                    </li>
                {{ /errors }}
            </ul>
        {{ /if }}
        <div class="grid gap-6 mt-10">

            {{ fields }}
                <div class="flex flex-col {{ view:sizing[width] }}">
                    <label class="sr-only" for="{{ handle }}">
                        {{ display }}
                    </label>
                    {{ field }}
                    {{ if error }}
                        <p class="mt-2 text-sm font-medium text-red-600">
                            {{ error }}
                        </p>
                    {{ /if }}
                </div>
            {{ /fields }}
            <x-button size="lg">
                Envoyer
            </x-button>
        </div>
    {{ /if }}
{{ /form:create }}