{% load domain_tags %}
{% for field in fields %}
<div class="form-group{% if field.field_type == 'media' %} form-group--media-inline{% endif %}">
    {% if field.field_type == 'checkbox' %}
    <label>
        <input type="checkbox" name="{{ field.name }}" {% if field.checked %}checked{% endif %}>
        {{ field.label }}
    </label>
    {% elif field.field_type == 'select' %}
    <label for="{{ field.name }}">{{ field.label }}</label>
    <select id="{{ field.name }}" name="{{ field.name }}">
        {% for choice in field.choices %}
        <option value="{{ choice.0 }}"{% if choice.0 == field.value %} selected{% endif %}>{{ choice.1 }}</option>
        {% endfor %}
    </select>
    {% elif field.field_type == 'textarea' %}
    <label for="{{ field.name }}">{{ field.label }}</label>
    <textarea id="{{ field.name }}" name="{{ field.name }}" rows="4">{{ field.value }}</textarea>
    {% elif field.field_type == 'number' %}
    <label for="{{ field.name }}">{{ field.label }}</label>
    <input type="number" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}">
    {% elif field.field_type == 'media' %}
    <label for="{{ field.name }}">{{ field.label }}</label>
    <div class="domain-media-field domain-media-field--inline" data-domain-media-field>
        <input type="hidden" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}">
        <div class="domain-media-preview" data-domain-media-preview="{{ field.name }}">
            {% if field.media_preview_url %}
            <img src="{{ field.media_preview_url }}" alt="">
            {% endif %}
        </div>
        <button type="button" class="btn btn-secondary" data-domain-media-action="choose" data-target="{{ field.name }}">Choose image</button>
        {% if field.can_delete %}
        <button type="button" class="btn btn-secondary" data-domain-media-action="delete" data-target="{{ field.name }}">Delete image</button>
        {% endif %}
    </div>
    {% elif field.field_type == 'link' %}
    <label for="{{ field.name }}_text">
        {{ field.label }}
        {% if field.help_slideout %}
        <button type="button" class="help-icon" data-slideout-target="{{ field.help_slideout }}" aria-label="{{ field.label }} help">
            <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
        </button>
        {% endif %}
    </label>
    {% if field.shared_page_link %}{% link_input field.name field.value '' field.value field.content_types %}{% else %}{% link_input field.name field.value '' None field.content_types %}{% endif %}
    {% else %}
    <label for="{{ field.name }}">{{ field.label }}</label>
    <input type="text" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}">
    {% endif %}
    {% if field.help_text %}<small>{{ field.help_text }}</small>{% endif %}
</div>
{% if field.separator_after %}<hr class="settings-field-separator">{% endif %}
{% endfor %}