{% spaceless %}

{% for form in forms %}

  {% if form.id == attributes.form  %}

<form id="{{ form.id }}" class="{{ form.cssClass }}" action="{{ site.api }}/submissions/submit" method="post" data-site="{{ site.id }}" data-success="{{ form.success }}" data-error="{{ form.error }}" data-recaptcha-error="{{ form.recaptchaError }}" respond-form >

    <input name="siteid" type="hidden" value="{{ site.id }}">
    <input name="formid" type="hidden" value="{{ form.id }}">


    {% for field in form.fields %}
      <div class="form-group" data-id="{{ field.id }}" data-label="{{ field.label }}"  data-type="{{ field.type }}" data-required="{{ field.required }}">

        <label for="{{ field.id }}">{{ field.label }}</label>

        {% if field.type == 'text'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="text" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'email'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="email" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'number'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="number" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'url'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="url" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'tel'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="tel" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'date'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="date" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'time'  %}
        <input id="{{ field.id }}" name="{{ field.id }}" type="time" placeholder="{{ field.placeholder }}" class="form-control">
        {% endif %}

        {% if field.type == 'textarea'  %}
        <textarea id="{{ field.id }}" name="{{ field.id }}" placeholder="{{ field.placeholder }}" class="form-control"></textarea>
        {% endif %}

        {% if field.type == 'select'  %}

        {% set options = field.options|split(',') %}

        <select id="{{ field.id }}" name="{{ field.id }}" class="form-control">
        {% for option in options %}
          <option value="{{ option }}">{{ option }}</option>
        {% endfor %}
        </select>

        {% endif %}

        {% if field.type == 'checklist'  %}

        {% set options = field.options|split(',') %}

        <div class="form-check">
        {% for option in options %}
          <div class="form-check">
            <input name="{{ field.id }}[]"  type="checkbox" value="{{ option }}" class="form-check-input">
            <label class="form-check-label" for="{{ field.id }}">{{ option }}</label>
          </div>
        {% endfor %}
        </div>

        {% endif %}

        {% if field.type == 'radiolist'  %}

        {% set options = field.options|split(',') %}

        <span class="checkbox list">
        {% for option in options %}
          <div class="form-check">
            <input name="{{ field.id }}" type="radio" value="{{ option }}" class="form-check-input">
            <label class="form-check-label" for="{{ field.id }}">{{ option }}</label>
          </div>
        {% endfor %}
        </span>

        {% endif %}

        {% if field.helperText != ''  %}
        <small id="emailHelp" class="form-text text-muted">{{ field.helperText }}</small>
        {% endif %}

      </div>
    {% endfor %}

  {% endif %}

  {% if form.validate == "true"  %}

    <div class="g-recaptcha-holder" data-sitekey="{{ attribute(settings, 'reCAPTCHA-site-key') }}"></div>

  {% endif %}

{% endfor %}
  <button type="submit" class="btn btn-primary">Submit</button>

  <span class="loading">
  	<!-- ack: https://github.com/jxnblk/loading -->
  	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g><path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/><path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" /></path></g></svg>
  </span>

  <span class="error">There was an error submitting your form</span>
</form>
{% endspaceless %}