<template>
  <div class="bms-header">
    <span class="bms-header__title">
      <slot name="logo" />
      <span class="bms-header__title__label">
        <span v-if="label">{{ label }}</span>
        <h1>{{ title }}</h1>
      </span>
      <BmsShortLinkMenu
        v-if="showHelperLink"
        :outline="true"
        :help-link="documentationUrl ?? null"
        :activity-link="activityUrl ?? null"
      />
      <span v-if="$slots.afterTitle" class="bms-header__title__after-title">
        <slot name="afterTitle" />
      </span>
      <span v-if="$slots.actions" class="bms-header__title__actions">
        <slot name="actions" />
      </span>
    </span>
    <span v-if="$slots.subtitle" class="bms-header__subtitle">
      <slot name="subtitle" />
    </span>
  </div>
</template>
<script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router';
import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    title: string;
    label?: string;
    documentationUrl?: string | null;
    activityUrl?: RouteLocationRaw | null;
  }>(),
  {
    documentationUrl: undefined,
    activityUrl: undefined,
  },
);

const showHelperLink = computed(() => {
  return props.documentationUrl || props.activityUrl;
});
</script>

<style lang="scss" scoped>
.bms-header {
  width: 100%;

  &__title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;

    &__label {
      h1 {
        margin: 0;
      }
    }
    &__actions {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  &__subtitle {
    margin-top: 0.5em;
    display: inline-block;
  }
}
</style>
