<template>
  <div
    class="row form-group mt-3"
    :key="$attrs.key"
    v-if="$attrs.brand == 'borhan'"
  >
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ localFormElement.label }}:</label
    >

    <div
      class="d-flex mt-2"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
    >
      <input
        @focus="clearErrors"
        @blur="validate"
        @keydown.enter.prevent="sendTextValue"
        class="form-control"
        :placeholder="localFormElement.placeholder"
        :type="localFormElement.type"
        :id="localFormElement.key"
        :name="localFormElement.key"
        v-model="textValue"
      />
      <button
        type="button"
        class="btn btn-light button-input"
        :class="$attrs.buttonClass"
        @click.prevent="sendTextValue"
        style="width: 4em"
      >
        <svg class="icon icon-Component-233--1">
          <use xlink:href="#icon-Component-233--1"></use>
        </svg>
      </button>
    </div>
  </div>
  <div class="row form-group mt-3" :key="$attrs.key" v-else>
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ localFormElement.label }}:</label
    >
    <div
      class="mt-2"
      :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
    >
      <input
        @focus="clearErrors"
        @blur="validate"
        @input="$emit('oninput', $event)"
        @paste="$emit('oninput', $event)"
        @keydown.enter="$emit('keydown', $event)"
        class="form-control"
        :placeholder="localFormElement.placeholder"
        :type="localFormElement.type"
        :id="localFormElement.key"
        :name="localFormElement.key"
        v-model="textValue"
      />
    </div>
  </div>
</template>

<script>
import formBuilderMixin from "~/extensions/formBuilderExtension.js";

export default {
  extends: formBuilderMixin,
};
</script>
<style scoped lang="scss">
.form-control {
  position: relative !important;
}
.button-input {
  background-color: unset !important;
  position: absolute !important;
  left: 2px !important;
  height: 100% !important;
  border: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>