{% macro RentalForm() %}
  {% call FormBuilder.Form({
    action: '/',
    attrs: {
      'method': 'POST',
      'x-data': 'AsyncForm()'
    }
  }) %}
    {% call FormBuilder.FormGroup({
      title: false,
      id: 'text-field',
      legendClassName: ''
    }) %}
      {% call GridBuilder.Grid({}) %}
        {% call GridBuilder.GridColumn({ lg: 6 }) %}
          {{ FormBuilder.FormControl({
            label: false,
            placeholder: 'Name*',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ lg: 6 }) %}
          {{ FormBuilder.FormControl({
            label: false,
            type: 'email',
            placeholder: 'E-mail*',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ lg: 6 }) %}
          {{ FormBuilder.FormControl({
            label: false,
            type: 'tel',
            placeholder: 'Telefonnummer*',
            attrs: {
              'data-tel': 'true',
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ lg: 6 }) %}
          {{ FormBuilder.FormControl({
            label: false,
            type: 'text',
            placeholder: 'Standgröße*',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ lg: 12 }) %}
          {{ FormBuilder.FormControl({
            label: false,
            type: 'textarea',
            placeholder: 'Stellen Sie uns kurz Ihr Standkonzept vor (600 Wörter)*'
          }) }}
        {% endcall %}
        {% call GridBuilder.GridColumn({ lg: 12 }) %}
          {{ FormBuilder.FormCheckbox({
            label: 'Hiermit erkläre ich mich damit einverstanden, dass die Marheineke Halle meine persönlichen Daten zum Zwecke der Stellenbesetzung nutzen darf. Die Daten werden nach dem Bewerbungsprozess wieder gelöscht.',
            attrs: {
              required: true
            }
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}
    {% call FormBuilder.FormActions() %}
      <template x-if="serverLoading">
        <div class="mt-3 w-full">
          {{ Spinner({ className: 'mx-auto' }) }}
        </div>
      </template>

      {{ Button({
        className: 'button--red button--fluid',
        type: 'submit',
        text: 'Senden',
        attrs: {
          'x-submit.async': 'form-id'
        }
      }) }}

      <template x-if="serverError">
        <div class="mt-3 mx-auto text-center mw-930 w-full">
          <p class="text-xs text-red">Sind sie sicher, dass Ihre Angaben richting waren? Bitte noch einmal prufen.</p>
        </div>
      </template>

      <template x-if="serverSuccess">
        <div class="mt-3 mx-auto text-center mw-930 w-full">
          <p class="text-xs text-secondary text-weight-700">Was passiert jetzt?</p>
          <p class="text-xs">Erstmal bekommen Sie eine Bestätigung per Mail. Unsere Händler:innen sehen sich Ihre Anfrage an und melden sich unter der angegebenen Mail-Adresse innerhalb von 7 Werktagen bei Ihnen.</p>
        </div>
      </template>

{#      <div class="mt-3 mx-auto text-center mw-930 w-full">#}
{#        <p class="text-xs text-secondary text-weight-700">Was passiert jetzt?</p>#}
{#        <p class="text-xs">Erstmal bekommen Sie eine Bestätigung per Mail. Unsere Händler:innen sehen sich Ihre Anfrage an und melden sich unter der angegebenen Mail-Adresse innerhalb von 7 Werktagen bei Ihnen.</p>#}
{#      </div>#}
    {% endcall %}
  {% endcall %}
{% endmacro %}

{% macro RentalFormSection(settings = {}) %}
  {% set settings = merge({
    className: 'section--offset-lg'
  }, settings) %}

  {% call Section({
    title: 'Anfrageformular: Vermietung',
    className: 'section--title-center ' + settings.className,
    containerClassName: 'container mw-1170'
  }) %}
    {{ RentalForm() }}
  {% endcall %}
{% endmacro %}