{% macro input(id, name, value, type, size, class, min, max, step, list) %}
    <input type="{{ type|default('text') }}" id="{{ id }}" name="{{ name }}" class="{{ class }}" value="{{ value }}" size="{{ size|default(20) }}"{% if type === 'number' %} min="{{ min }}" max="{{ max }}" step="{{ step|default(1) }}"{% else %} minlength="{{ min }}" maxlength="{{ max }}"{% endif %}{% if list %} list="{{ list }}"{% endif %} />
{% endmacro %}

{% macro pickem(id, name, value, checked, type, label, class) %}
	<label><input type="{{ type|default('radio') }}" id="{{ id }}" class="{{ class }}" name="{{ name }}" value="{{ value }}"{{ checked ? ' checked="checked"' : '' }} /> {{ lang(label) }}</label>
{% endmacro %}

{% macro dropdown(id, name, value, options, togglable) %}
	<select id="{{ id }}" name="{{ name }}"{% if togglable %} data-togglable-settings="true"{% endif %}>
	{% for option in options -%}
		<option value="{{ option.value }}"{% if option.value == value %} selected="selected"{% endif %}{% if togglable %} data-toggle-setting="#{{ id ~ '-' ~ option.value|replace({'.': '\\.'}) }}"{% endif %}>{{ lang(option.label) }}</option>
	{%- endfor %}
	</select>
{% endmacro %}

{% macro options(field_name, type, option, index, checked) %}
    {{ include('fields/options.html') }}
{% endmacro %}

{% macro choice(type, data) %}
	<dl>
		<dt><label for="{{ data.FIELD_NAME ~ '-options' }}">{{ lang('OPTIONS') ~ lang('COLON') }}</label></dt>
		<dd>
			{% if type === 'select' %}
				{% set type = data.FIELD_PROPS.multi_select ? 'checkbox' : 'radio' %}
				{{ _self.pickem('multi_select_' ~ data.FIELD_NAME, 'field_props[' ~ data.FIELD_NAME ~ '][multi_select]', 1, data.FIELD_PROPS.multi_select, 'checkbox', 'MULTI_SELECT', 'toggle-multi') }}<br />
			{% else %}
				{{ _self.pickem('vertical_' ~ data.FIELD_NAME, 'field_props[' ~ data.FIELD_NAME ~ '][vertical]', 1, data.FIELD_PROPS.vertical, 'checkbox', 'ALIGN_VERTICALLY') }}<br />
				{{ _self.input(data.FIELD_NAME ~ '-multi_select', 'field_props[' ~ data.FIELD_NAME ~ '][multi_select]', data.FIELD_PROPS.multi_select, 'hidden') }}
			{% endif %}
			<div id="{{ data.FIELD_NAME }}-options-container" class="field-options-list">
			{% for option in data.FIELD_PROPS.options %}
				{{ _self.options(data.FIELD_NAME, type, option, loop.index, (option in data.FIELD_PROPS.defaults)) }}
			{% endfor %}
			</div>
			<a href="#" class="add-option option-radio ui-corner-all ui-state-default" id="add-option-{{ data.FIELD_NAME }}" data-type="{{ (type == 'checkbox' or data.FIELD_PROPS.multi_select) ? 'checkbox' : 'radio' }}">{{ lang('ADD_OPTION') }}</a>
		</dd>
	</dl>
{% endmacro %}