<div class="border-bottom pb-4 mb-4">
    <div class="row g-3 align-items-start">
        <div class="col-lg-3">
            <label class="form-label {% if field.required == 1 %}required{% endif %}" for="{{ field.name }}">{% if field.hide_label != 1 %}{{ field.label }}{% endif %}</label>
        </div>
        <div class="col-lg-7">
                {% if field.type == "text" %}
                    <div class="input-group">
                        {% if field.prefix %}
                            <span class="input-group-text">{{ field.prefix }}</span>
                        {% endif %}
                        <input class="form-control" type="text"
                               name="{{ field.name }}"
                               value="{{ field.default_value }}" id="{{ field.name }}"
                            {{ (field.readonly==1)? 'readonly="readonly"' : '' }} />
                        {% if field.suffix %}
                            <span class="input-group-text">{{ field.suffix }}</span>
                        {% endif %}
                    </div>
                {% elseif field.type == "url" %}
                    <input class="form-control" type="url" name="{{ field.name }}"
                           value="{{ field.default_value }}" id="{{ field.name }}"
                           placeholder="https://example.com"
                        {{ (field.readonly==1)? 'readonly="readonly"' : '' }} />
                    {% elseif field.type == "select" %}
                        {% if field.options is empty %}
                        <div class="alert alert-danger" role="alert">
                            <strong class="me-1">{{ 'Important:'|trans }}</strong>{{ 'Please click on "Edit" in order to add options'|trans }}
                        </div>
                    {% else %}
                        <select class="form-select" name="{{ field.name }}" required="required" id="{{ field.name }}"
                            {{ (field.readonly==1)? 'disabled="disabled"' : '' }}>
                            {% for k,v in field.options %}
                                <option value="{{ v }}" {{ (field.default_value == v) ? 'selected' : '' }}>{{ k }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}

                {% elseif field.type == "checkbox" %}

                    {% if field.options is empty %}
                        <div class="alert alert-danger" role="alert">
                            <strong class="me-1">{{ 'Important:'|trans }}</strong>{{ 'Please click on "Edit" in order to add options'|trans }}
                        </div>
                    {% else %}
                        <div>
                        {% for k,v in field.options %}
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="{{ field.name }}" value="{{ v }}" id="{{ k }}_{{ v }}"
                                       {% if v in field.default_value %}checked="checked"{% endif %}
                                    {{ (field.readonly==1)? 'disabled="disabled"' : '' }} />
                                <span class="form-check-label">{{ k }}</span>
                            </label>
                        {% endfor %}
                        </div>
                    {% endif %}

                    {% elseif field.type == "radio" %}
                    {% if field.options is empty %}
                        <div class="alert alert-danger" role="alert">
                            <strong class="me-1">{{ 'Important:'|trans }}</strong>{{ 'Please click on "Edit" in order to add options'|trans }}
                        </div>
                    {% else %}
                        <div>
                        {% for k,v in field.options %}
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="{{ field.name }}" value="{{ v }}"
                                       id="{{ k }}_{{ v }}" {{ (field.default_value == v) ? 'checked' : '' }}
                                    {{ (field.readonly==1)? 'disabled="disabled"' : '' }} />
                                <span class="form-check-label">{{ k }}</span>
                            </label>
                        {% endfor %}
                        </div>
                    {% endif %}
                {% elseif field.type == "textarea" %}
                    {% set textarea_width = field.options.width|default(null) %}
                    {% set textarea_height = field.options.height|default(null) %}
                    <textarea class="form-control" name="{{ field.name }}" id="{{ field.name }}"
                        {% if textarea_width or textarea_height %}
                            style="{% if textarea_width %}width: min(100%, {{ textarea_width }}px);{% endif %}{% if textarea_height %}height: {{ textarea_height }}px; min-height: {{ textarea_height }}px;{% endif %}"
                        {% endif %}
                    >{{ field.default_value }}</textarea>
                {% endif %}
        </div>
        <div class="col-lg-2">
            <div class="d-flex justify-content-lg-end gap-1">
                <a class="btn btn-icon" href="#" title="Edit" data-bs-target="#formbuilder_field{{ field.id }}" data-bs-toggle="modal">
                    <svg class="icon">
                        <use xlink:href="#edit"/>
                    </svg>
                </a>
                <a class="remove-item btn btn-icon" title="Delete" href="#" data-field-id="{{ field.id }}">
                    <svg class="icon">
                        <use xlink:href="#delete"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>
