<template>
    <div class="box p-2 mb-0">
      <div class="p-2 mb-3">
        <h1 class="title is-4">
          <b-icon :icon="icon || 'plus-circle'" />
          <span class="pl-2">{{ title || $t('text.add') }}</span>
        </h1>
        <h2 class="subtitle is-6" v-html="subtitle"></h2>
      </div>

      <slot />

      <div class="has-text-right pt-3 mt-3">
        <b-button icon-left="content-save" 
                  type="is-primary" 
                  @click="$emit('save')"
                  :class="(loading)?'is-loading px-5':'px-5'"> 
            {{ buttonText || $t('button.save') }} 
        </b-button>
      </div>
    </div>
</template>

<script>
export default {
  props: ["loading", "title", "subtitle", "icon", "buttonText"],
}
</script>