<template>
  <div>
    <div class="field is-horizontal is-marginless">
      <div class="field-label is-normal is-family-sans-serif has-text-left">
        <label :for="inputId" class="label is-uppercase">{{ label }}<span v-if="required">*</span></label>
        <p class="is-size-7">
          {{ description }}
        </p>
      </div>
      <div class="field-body">
        <div class="field">
          <div class="control">
            <slot />
          </div>
          <p :class="{ 'help is-size-7 is-family-sans-serif': true, 'is-danger': error }">
            <base-icon v-if="error" value="exclamation" />
            {{ message }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import BaseIcon from '../icon/BaseIcon.vue'

@Component({
  name: 'base-field',
  components: {
    BaseIcon
  }
})
export default class BaseField extends Vue {
  @Prop({ default: '' }) label!: string
  @Prop() inputId!: string
  @Prop({ default: '' }) description!: string
  @Prop({ default: '' }) message!: string
  @Prop({ default: false }) error!: boolean
  @Prop({ default: false }) required!: boolean
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/form/shared.sass";
@import "bulma/sass/form/tools.sass";
</style>
