<script setup>

// Until we support input type as prop, make sure EmailInput.vue matches the features here

import { useTemplateRef } from 'vue';

const model = defineModel();
const props = defineProps({
  placeholder: String,
  readonly: {
    type: Boolean,
    default: false,
  },
});
const inputElement = useTemplateRef('inputElement');

function focus() {
  inputElement.value.focus();
}

defineExpose({ focus });

</script>

<template>
  <input ref="inputElement" class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
</template>

<style>

.pankow-text-input {
  display: inline-block;
  font-size: 14px;
  color: var(--pankow-text-color);
  background-color: var(--pankow-input-background-color);
  padding: var(--pankow-input-vertial-padding) var(--pankow-input-horizontal-padding);
  border-radius: var(--pankow-border-radius);
  border-style: solid;
  border-width: 1px;
  border-color: var(--pankow-input-border-color);
  transition: border-color 250ms;
}

.pankow-form-group.has-error .pankow-text-input,
.pankow-text-input.has-error {
  color: var(--pankow-text-color);
  border-color: var(--pankow-color-danger) !important;
}

.pankow-text-input:hover {
  border-color: var(--pankow-input-border-color-hover);
}

.pankow-text-input:focus {
  border-color: var(--pankow-input-border-color-focus);
  outline: none;
}

.pankow-text-input[disabled],
.pankow-text-input[readonly] {
  cursor: not-allowed;
  background-color: var(--pankow-input-readonly-background-color);
}

.pankow-text-input[disabled]:hover {
  border-color: var(--pankow-input-border-color);
}

</style>