<template>
  <div class="ui-page-header items-center ui-gap-x-md">
    <slot name="title">
      <div class="overflow-hidden">
        <div class="text-h2 q-ml-none flex no-wrap items-center">
          <span class="q-mr-sm ui-page-header__title">{{ title }}</span>
          <slot name="afterTitle"></slot>
        </div>
        <div class="text-body1 text-blue-grey">{{ subtitle }}</div>
      </div>
    </slot>

    <q-space />

    <div class="row no-wrap ui-gap-x-sm">
      <slot />
    </div>
  </div>
</template>

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

@Component({ inheritAttrs: false, components: { QSpace } })
export default class UiPageHeader extends Vue {
  @Prop(String) title?: string
  @Prop(String) subtitle?: string
}
</script>
