<template>
  <div class="ui-adding-panel">
    <q-icon :name="icon" color="blue-grey-1" size="88px" />
    <div class="text-h2 q-mt-lg">{{ title }}</div>
    <div v-if="subtitle" class="text-body1 text-blue-grey q-mt-sm">
      {{ subtitle }}
    </div>
    <ui-btn
      class="q-mt-md"
      @click="submit"
      size="lg"
      :to="to"
      :label="submitLabel"
    />
  </div>
</template>

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

@Component({
  components: { UiBtn, QIcon },
  inheritAttrs: false,
})
export default class UiAddingPanel extends Vue {
  @Prop({ type: String, default: 'la la-plus-square' }) icon!: string
  @Prop({ type: String, required: true }) title!: string
  @Prop(String) subtitle?: string
  @Prop({ type: String, required: true }) submitLabel!: string
  @Prop() to!: Location

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