<div v-if="field.settings.autocompleteEnabled" class="fui-row">
    <div class="fui-col">
        <label class="fui-field-label"></label>
        <input type="text" class="fui-field-input" :placeholder="field.settings.autocompletePlaceholder" :value="field.settings.autocompleteDefaultValue">
    </div>
</div>

<div class="fui-row" v-for="(row, rowIndex) in field.settings.rows">
    <template v-for="(field, fieldIndex) in row.fields">
        <div v-if="field.settings.enabled && field.settings.handle == 'country'" class="fui-col-auto">
            <label class="fui-field-label">${ field.settings.label } <span v-if="field.settings.required" class="error">*</span></label>

            <select class="fui-field-select" :value="field.settings.defaultValue">
                <option value="" disabled selected>${ field.settings.placeholder }</option>
                <option v-for="country in fieldType.data.countries" :value="country.value">${ country.label }</option>
            </select>
        </div>

        <div v-else-if="field.settings.enabled" class="fui-col-auto">
            <label class="fui-field-label">${ field.settings.label } <span v-if="field.settings.required" class="error">*</span></label>
            <input type="text" class="fui-field-input" :placeholder="field.settings.placeholder" :value="field.settings.defaultValue">
        </div>
    </template>
</div>