{% macro form_error(form) %}
  {% if form.errors %}
    <div class="notification is-danger">
      <ul>
        {% for field, error_list in form.errors.items() %}
          {% for error in error_list %}
            <li><strong>{{ form[field].label }}:</strong> {{ error }}</li>
          {% endfor %}
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endmacro %}

{% macro render_field(field) %}
  {% if field.type == 'EmailField'  or
        field.type == 'IntegerField'  or
        field.type == 'PasswordField' or
        field.type == 'StringField' or
        field.type == 'URLField' %}
    {{ render_field_text(field) }}
  {% elif field.type == 'BooleanField' %}
    {{ render_field_checkbox(field) }}
  {% elif field.type == 'SelectField' %}
    {{ render_field_select(field) }}
  {% else %}
   {{ field.type }}
  {% endif %}
{% endmacro %}


{% macro render_field_text(field) %}
<label class="label" for="{{ field.id }}">
  {{ field.label }}
  {% if field.render_kw['help'] %}
    <a class="icon has-text-grey" title="{{ field.render_kw['help'] }}">
      <i class="fas fa-circle-info"></i>
    </a>
  {% endif %}
</label>
<div class="control column p-0 has-icons-left has-icons-right">
  <input type="{{ field.widget.input_type }}" class="input"
         id="{{ field.id }}" name="{{ field.name }}"
         placeholder="{{ field.render_kw['placeholder'] }}"
         @click="touched = true"
         x-model="{{ field.id }}"
         x-effect="setFieldState('{{ field.id }}', isValid(), touched)"
         x-bind:class="{ 'is-danger': !isValid() } "/>
  <span class="icon is-small is-left"><i class="fas {{ field.render_kw['icon'] }}"></i></span>
  <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
</div>
{% endmacro %}

{% macro render_field_checkbox(field) %}
  <label class="label" for="{{ field.id }}">
    <input type="{{ field.widget.input_type }}"
           id="{{ field.id }}"  name="{{ field.name }}"
           value="1"
           @click="touched = true"
           x-model="enabled"
           x-effect="setFieldState('{{ field.id }}', true, touched)" />
    {{ field.label }}
  </label>
{% endmacro %}

{% macro render_field_select(field) %}
  <label class="label" for="{{ field.id }}">{{ field.label }}</label>
  <div class="control select">
    <select id="{{ field.id }}" name="{{ field.name }}"
            @click="touched = true"
            x-model="{{ field.id }}"
            x-effect="setFieldState('{{ field.id }}', true, touched)">
      {% for value, label in field.choices %}
        <option value="{{ value }}">{{ label }}</option>
      {% endfor %}
    </select>
  </div>
  <input type="hidden" name="{{ field.name }}" :value="{{ field.id }}">
{% endmacro %}