<template>
  <label :class="['field', classObject]">
    <div class="flex flex-row between-xs middle-xs">
      <span v-if="label" class="field-label">{{ label }}</span>
      <span v-if="count" class="text-small text-gray">{{ $attrs.maxlength-value.length }}</span>
    </div>
    <span v-if="description" class="field-description" v-html="description"></span>

    <div v-if="error" class="field-error-container">
      <i class="field-error-icon fas fa-exclamation-circle"></i>
      <div class="field-error-message">
        {{ error }}
      </div>
    </div>

    <div v-if="valid" class="field-valid-container">
      <i class="field-valid-icon fas fa-check-circle"></i>
    </div>

    <textarea
      :name="name"
      class="field-entry"
      :disabled="disabled"
      v-bind="$attrs"
      ref="textarea"
      :value="value"
      v-on="inputListeners"
    ></textarea>


  </label>
</template>

<style src="../../identity.css"></style>
<style scoped src="../BaseInput/styles.css" /></style>
<style scoped src="./styles.css" /></style>

<script src="./scripts.js"></script>