{% if config.DEBUG %}<span class="debug-hint" title="{{ self._TemplateReference__context.name }}">?</span>{% endif %}

<div class="field {{ content.__class__.__name__.lower() }}">

    <label for="{{ content.ref_id }}">{% if content.label %}<span class="caption">{{ content.label }}</span>{% endif %}</label>
    <input
        id="{{ content.ref_id }}"
        class="{{ content.prefix }}-{{ content.name }}{% if content.errors %} invalid{% endif %}"
        type="{% block type %}text{% endblock %}"
        name="{{content.prefix}}.{{ content.name }}"
        {% if content.readonly %}readonly{% endif %}

        {% if content.form %}
            form="{{ content.form.ref_id }}"
        {% endif %}

        {% if content.choices %}
            list="{{ content.list_id }}"
        {% endif %}
        
        {% if content.placeholder %}
            placeholder="{{ content.placeholder }}"
        {% endif %}

        value="{% block value %}{{ content.value_string(content.value) }}{% endblock %}"

        {% if content.required %}
        required
        {% endif %}

        {% if content.multi %}
        multiple
        {% endif %}

        {% block extra_properties %}{% endblock %}
    >

    {% block options %}
    {% if content.choices %}
    <datalist id="{{ content.list_id }}">
    {% for choice, label in content.choices %}
        <option value="{{ content.value_string(choice) }}" label="{{ label }}">
    {% endfor %}
    </datalist>
    {% endif %}
    {% endblock %}
            
    {% if self.help()|trim %}
    {% block help %}
        {% if content.help_text %}
           <span class="help">{{ content.help_text }}</span> 
        {% endif %}
    {% endblock %}
    {% endif %}

</div>
