<template>
  <div>
    <div class="ui-form-controls bg-background  flex no-wrap">
      <div v-if="!hideButtons" class="q-gutter-x-sm">
        <ui-btn @click="save" label="Сохранить" />
        <ui-btn @click="cancel" flat label="Отменить" />
      </div>
      <div
        v-if="!!description"
        class="ui-form-controls__description flex items-center q-ml-sm"
      >
        <q-icon name="la la-question-circle q-mr-sm" />
        <span>{{ description }}</span>
      </div>
      <q-space />
      <slot />
    </div>
    <q-separator />
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiBtn from '../buttons/UiBtn.vue'
import { QIcon, QSeparator, QSpace } from 'quasar'

@Component({
  components: { UiBtn, QSpace, QSeparator, QIcon },
  inheritAttrs: false,
})
export default class UiFormControls extends Vue {
  @Prop(String) description?: string
  @Prop(Boolean) hideButtons?: boolean

  @Emit()
  save() {
    return true
  }

  @Emit()
  cancel() {
    return true
  }
}
</script>
