{# TEXT #}

{% macro text(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<input id="field-{{field.key}}"
	   name="{{field.key}}"
	   type="text"
	   value="{{field.value}}">
{% endmacro %}


{# TEXT AREA #}

{% macro longtext(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<textarea id="field-{{field.key}}" name="{{field.key}}">{{field.value}}</textarea>
{% endmacro %}


{# FREE SELECT #}

{% macro free_select(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<input id="field-{{field.key}}"
	   name="{{field.key}}"
	   type="text"
	   list="suggestions-{{field.key}}"
	   value="{{field.value}}">
<datalist id="suggestions-{{field.key}}">
{%- for option in field.options %}
	<option value="{{option}}">
{%- endfor %}
</datalist>
{% endmacro %}


{# NUMBER #}

{% macro number(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<input id="field-{{field.key}}"
	   name="{{field.key}}"
	   type="number"
	   value="{{field.value}}"
	   step="{{field.step}}"
	   min="{{field.min}}"
	   max="{{field.max}}">
{% endmacro %}


{# CHECKBOX #}

{% macro checkbox(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<label class="checkbox-wrap" for="field-{{field.key}}">
	<input id="field-{{field.key}}"
		   name="{{field.key}}"
		   type="checkbox"
		   {% if field.checked %}checked{% endif %}>
</label>
{% endmacro %}


{# SELECT #}

{% macro select(field) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<select id="field-{{field.key}}" name="{{field.key}}">
{%- for option in field.options %}
	<option value="{{option}}" {% if field.value == option %}selected{% endif %}>{{option}}</option>
{%- endfor %}
</select>
{% endmacro %}


{# TAGS #}

{% macro tags(field,free=false) %}
<label for="field-{{field.key}}">
	{{field.label}}
</label>
<input type="hidden" id="field-{{field.key}}" name="{{field.key}}" value="{{field.value}}">
<div class="tag-input" id="tag-input-{{field.key}}"></div>
<datalist id="suggestions-{{field.key}}">
{%- for option in field.options %}
	<option value="{{option}}">
{%- endfor %}
</datalist>
<script>
	!(function() {
		let taggle;
		let hiden_field = document.querySelector('#field-{{field.key}}');

		let onchange = () => {
			let values = taggle.tag.values.join(" ");
			hiden_field.setAttribute("value", values);
		};

		taggle = new Taggle('tag-input-{{field.key}}', {
			placeholder: 'Enter tags...',
			allowDuplicates: false,
			tags: {{field.tags_json | safe }},
			allowedTags: {% if not free %}{{field.all_tags_json | safe}}{% else %}[]{% endif %},
			onTagAdd: onchange,
			onTagRemove: onchange,
			saveOnBlur: true,
			clearOnBlur: false,
		});

		document.querySelector('#tag-input-{{field.key}} .taggle_input')
			.setAttribute('list', 'suggestions-{{field.key}}');
	})();
</script>
{% endmacro %}


{# FREE TAGS #}

{% macro free_tags(field) %}
{{ self::tags(field=field, free=true) }}
{% endmacro %}