{% load bulma %}
{% if errors %}
<div class="bk-notification bk-is-danger bk-is-light">
    <button class="bk-delete bk-is-small"></button>
    {{ errors }}
</div>
{% endif %}

{% if errors and not fields %}
  <div>{% for field in hidden_fields %}{{ field }}{% endfor %}</div>
{% endif %}

{% for field, errors in fields %}
<div class="bk-field" {% with classes=field.css_classes %}{% if classes %} class="{{ classes }}"{% endif %}{% endwith %} data-error="{{ field.errors|length }}">	
	
	{% if field|is_boolean %}
		<label class="checkbox">
			{{ field }}
			{{ field.label }}
		</label>
	{% else %}
		{% if field.label %}{{ field.label_tag }}{% endif %}
			{{ field }}
		{% endif %}
	{% if field.help_text and not field.errors %}
	<div class="bk-help">{{ field.help_text|safe }}</div>
	{% endif %}
	{% if field.errors %}
	<div class="bk-help bk-is-danger">
		<p>{{ field.errors }}</p>
	</div>
	{% endif %}
	{% if forloop.last %}
      {% for field in hidden_fields %}{{ field }}{% endfor %}
    {% endif %}
</div>
{% endfor %}

{% if not fields and not errors %}
  {% for field in hidden_fields %}{{ field }}{% endfor %}
{% endif %}

<script>
	document.addEventListener('DOMContentLoaded', function() {
		var fields = document.querySelectorAll('.bk-field');
		for (var i = 0; i < fields.length; i++) {
			var field = fields[i];
			var error = field.getAttribute('data-error');
			if (Number(error) > 0) {
				// 给存在错误的表单添加样式
				field.querySelector('input').classList.add('bk-is-danger');
			}
		}
	});
</script>