<script setup>
defineProps({
  title: String,
  subtitle: String
})
import { defineSlots } from 'vue'
import { Colors } from '@/ThemeConfig.vue'
</script>

<template>
  <div class="mb-4">
    <div class="columns is-vcentered is-mobile">
      <div class="column">
        <h1
            style="margin-bottom: 0"
            class="is-size-3"
            :style="{ 'color': Colors.global.textColorDark }"
        >
          {{ title }}
        </h1>
        <p class="is-size-5"
           :style="{ 'color': Colors.global.textColorDark }"
        >
          {{ subtitle }}
        </p>
      </div>
      <div class="column is-narrow">
        <slot name="buttons"></slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<style scoped>

</style>