{% macro field(title,type,placeholder="",options=[],required=False) %}

<div class="Field">
    <div class="FieldTitle">
        {{ title|title }}
        {% if required %} <span class="Required">*</span> {% endif %}
    </div>
    

    <div class="FieldInput">
        {% if type == "select" %}
            <select onchange="Otro(this)" {% if required %} required {% endif %}>
                <option selected disabled hidden value="">{{ placeholder }}</option>
                {% for option in options %}
                    {% if option == "#other" %}
                        <option value="Otro">Otro</option>
                    {% else %}
                        <option value="{{ option }}">{{ option }}</option>
                    {% endif %}
                {% endfor %}
            </select>
            <input type="text" class="Other">
            
        {% elif type == "checkbox" %}
            {% if options|length == 0 %}
                <input type="checkbox" {% if required %} required {% endif %}>
            {% endif %}
            
            {% for option in options %}
                {% if option == "#other" %}
                    <div class="Checkbox">
                        <div class="CheckboxTitle">
                            Otro
                        </div>
                        <div>
                            <input type="checkbox" onclick="Otro(this)" {% if required %} required {% endif %}>
                        </div>
                    </div>    
                {% else %}
                    <div class="Checkbox">
                        <div class="CheckboxTitle">
                            {{ option|title }}
                        </div>
                        <div>
                            <input type="checkbox" {% if required %} required {% endif %}>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
            <input type="text" class="Other">
        
        {% else %}
            <input type="{{ type }}" placeholder="{{ placeholder }}" {% if required %} required {% endif %}>
        
        {% endif %}
    </div>
</div>
<hr class="Separator">

{% endmacro %}