<div class="modal modal-blur fade" id="formbuilder_field{{ field.id }}" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">

            <form class="modal-content api-form" method="post" action="admin/formbuilder/update_field" name="field_form{{ field.id }}" data-api-reload="1">
                <div class="modal-header">
                    <h5 class="modal-title">{{ 'Edit field'|trans }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                     <input type="hidden" name="id" value="{{ field.id }}">
                     <input type="hidden" name="form_id" value="{{ form.id }}">
                     <input type="hidden" name="type" value="{{ field.type }}">
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="name">{{ 'Name'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="name" value="{{field.name}}" id="name">
                            <small class="form-hint">{{ 'Please keep in mind that field name cannot start with a number. Special characters will be replaced with underscores ( _ )'|trans }}</small>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="label">{{ 'Label'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="label" value="{{ field.label }}" id="label">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        {% if field.type == "checkbox" or field.type == "radio" or field.type == "select" %}
                            <label class="col-md-3 col-form-label">{{ field.type|capitalize }} {{ 'options'|trans }}</label>
                            <div class="col">
                                <div class="row">
                                    <div class="col-6">
                                        <label class="col-form-label">{{ 'Label'|trans }}</label>
                                    </div>
                                    <div class="col-6">
                                        <label class="col-form-label">{{ 'Value'|trans }}</label>
                                    </div>
                                </div>
                                {% for k,v in field.options %}
                                    <div class="row">
                                        <div class="col-6 mb-2">
                                            <input class="form-control" type="text" name="labels[]" value="{{ k }}">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <input class="form-control" type="text" name="values[]" value="{{ v }}">
                                        </div>
                                    </div>
                                {% endfor %}
                                <div class="row copy-field">
                                    <div class="col-6 mb-2">
                                        <input class="form-control" type="text" name="labels[]">
                                    </div>
                                    <div class="col-6 mb-2">
                                        <input class="form-control" type="text" name="values[]">
                                    </div>
                                </div>
                                <div class="copy-field">
                                    <a href="#" class="btn btn-outline-primary new-field" rel="{{ i }}">{{ '+ Add new option'|trans }}</a>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label">{{ 'Options'|trans }}</label>
                        <div class="col pt-2">
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="required" value="1" id="required"
                                       value="1" {{ (field.required == 1)? 'checked="checked"' : "" }}>
                                <span class="form-check-label">{{ 'Required'|trans }}</span>
                            </label>
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="hide_label" value="1"
                                       id="hide_label" value="1" {{ (field.hide_label == 1)? 'checked="checked"' : "" }}>
                                <span class="form-check-label">{{ 'Hide label'|trans }}</span>
                            </label>
                            <label class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="readonly" value="1" id="readonly"
                                       value="1" {{ (field.readonly == 1)? 'checked="checked"' : "" }}>
                                <span class="form-check-label">{{ 'Read only'|trans }}</span>
                            </label>
                        </div>
                    </div>
                    {% if field.type == "text" %}
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Additional settings'|trans }}</label>
                            <div class="col">
                                <label class="col-form-label" for="prefix">{{ 'Prefix'|trans }}</label>
                                <div class="input-group">
                                    <input id="prefix" class="col form-control" type="text"
                                           placeholder="{{ 'Prepend text'|trans }}"
                                           name="prefix"
                                           value="{{ field.prefix }}" id="prefix_text">
                                </div>
                            </div>
                            <div class="col">
                                <label class="col-form-label" for="suffix">{{ 'Suffix'|trans }}</label>
                                <div class="input-group">
                                    <input id="suffix" class="col form-control" type="text"
                                           placeholder="{{ 'Append text'|trans }}"
                                           name="suffix"
                                           value="{{ field.suffix }}" id="suffix_text">
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    {% if field.type == "textarea" %}
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Textarea size'|trans }}</label>
                            <div class="col">
                                <label class="col-form-label" for="textarea-width">{{ 'Width'|trans }}</label>
                                <div class="input-group">
                                    <input type="hidden" name="textarea_option[]" value="width">
                                    <input class="form-control" type="text" name="textarea_size[]" value="{{field.options.width}}" id="textarea-width">
                                    <span class="input-group-text">{{ 'px'|trans }}</span>
                                </div>
                            </div>
                            <div class="col">
                                <label class="col-form-label" for="textarea-height">{{ 'Height'|trans }}</label>
                                <div class="input-group">
                                    <input type="hidden" name="textarea_option[]" value="height">
                                    <input class="form-control" type="text" name="textarea_size[]" value="{{field.options.height}}" id="textarea-height">
                                    <span class="input-group-text">{{ 'px'|trans }}</span>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="default_value">{{ 'Default value'|trans }}</label>
                        <div class="col">
                            {% if field.type == "text" %}
                                <div class="input-group">
                                    {% if field.prefix %}
                                        <span class="input-group-text" id="prepended_text">{{ field.prefix }}</span>
                                    {% endif %}
                                    <input class="form-control" type="text"
                                           id="default_value"
                                           name="default_value"
                                           value="{{ field.default_value }}" id="{{ field.name }}"
                                        {{ (field.readonly==1)? 'readonly="readonly"' : '' }} />
                                    {% if field.suffix %}
                                        <span class="input-group-text" id="appended_text">{{ field.suffix }}</span>
                                    {% endif %}
                                </div>
                            {% elseif field.type == "checkbox" %}
                                {% for k,v in field.options %}
                                    <label class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="default_value[]" value="{{ v }}" id="{{ k }}_{{ v }}"
                                               {% if v == field.default_value %}checked="checked"{% endif %}>
                                        <span class="form-check-label">{{ k }}</span>
                                    </label>
                                {% endfor %}
                            {% elseif field.type == "radio" %}
                                {% for k,v in field.options %}
                                    <label class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="default_value" value="{{ v }}"
                                               id="{{ k }}_{{ v }}"  {% if v == field.default_value %}checked="checked"{% endif %}>
                                        <span class="form-check-label">{{ k }}</span>
                                    </label>
                                {% endfor %}
                            {% elseif field.type == "select" %}
                                <select class="form-select" name="default_value">
                                    <option value="">Select a default value</option>
                                    {% for k,v in field.options %}
                                        <option value="{{ v }}"
                                            {{ (field.default_value == v) ? 'selected' : '' }}>{{ k }}</option>
                                    {% endfor %}
                                </select>
                            {% elseif field.type == "textarea" %}
                                <textarea class="form-control" name="default_value" style="width: {{ field.options.width }}px; height: {{ field.options.height }}px;">{{ field.default_value }}</textarea>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label class="col-md-3 col-form-label" for="label">{{ 'Description'|trans }}</label>
                        <div class="col">
                            <input class="form-control" type="text" name="description" value="{{ field.description}}" id="description">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</a>
                    <input type="submit" class="btn btn-primary save-field-form" value="{{ 'Save'|trans }}">
                </div>
            </form>
    </div>
</div>
