<div>

    <div class="wpuf-password-field">
        <div class="wpuf-label">
            <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
                  class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
                  <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
            </span>
            <label :for="'wpuf-' + field.name ? field.name : 'cls'">
                {{ field.label }} <span v-if="field.required && 'yes' === field.required" class="required">*</span>
            </label>
            <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
                  class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
                  <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
            </span>
        </div>

        <div class="wpuf-fields">
            <input
                type="text"
                :class="builder_class_names('textfield')"
                :placeholder="field.placeholder"
                :value="field.default"
                :size="field.size"
            >
            <span v-if="field.help" class="wpuf-help" v-html="field.help" />
        </div>
    </div>

    <div v-if="field.repeat_pass && 'yes' === field.repeat_pass" class="wpuf-password-field">
        <div class="wpuf-label">
            <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
                  class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
                  <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
            </span>
            <label :for="'wpuf-' + field.name ? field.name : 'cls'">
                {{ field.re_pass_label }} <span class="required">*</span>
            </label>
            <span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
                  class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
                  <i :class="[field.field_icon, 'wpuf-field-icon']"></i>
            </span>
        </div>

        <div class="wpuf-fields">
            <input
                type="text"
                :class="builder_class_names('textfield')"
                :size="field.size"
                :placeholder="field.re_pass_placeholder"
            >
            <span v-if="field.re_pass_help" class="wpuf-help wpuf-re-password-help" v-html="field.re_pass_help" />
        </div>
    </div>

    <div v-if="field.pass_strength && 'yes' === field.pass_strength" class="wpuf-password-field">
        <div class="wpuf-label">
        </div>
        <div class="wpuf-fields">
            <div class="password-strength-meter wpuf-w-fit wpuf-text-base wpuf-text-gray-700 wpuf-bg-emerald-200 wpuf-px-[16px] wpuf-py-[10px] wpuf-rounded-md">Strength indicator</div>
        </div>
    </div>
</div>
