<template>
  <div :class="wrapperClasses">
    <div class="page__breadcrumb">
      <slot name="breadcrumb" />
    </div>
    <slot name="tabs" />
    <div class="page__header">
      <slot name="header" />
    </div>

    <main>
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{ size?: 'small' | 'medium' | 'large' | 'full' }>(),
  { size: 'large' },
);
const wrapperClasses = computed(() => `page page--${props.size}`);
</script>

<style lang="scss" scoped>
.page {
  margin: 0 auto;
  width: var(--wrapper-width, calc(100% - 3.2rem));
  max-width: 126rem;
  padding: 2em 0;
  min-height: calc(100% - var(--bms-header-height));
  display: flex;
  flex-direction: column;
  gap: 2em;

  $sizes: (
    'small': 80rem,
    'medium': 126rem,
    'large': 144rem,
    'full': 100%,
  );

  @each $type, $size in $sizes {
    &--#{$type} {
      max-width: #{$size};
    }
  }

  &:empty {
    display: none;
  }

  &__tabs,
  &__breadcrumb,
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:empty {
      display: none;
    }

    ::v-deep(h1, h2, h3, h4, h5) {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  :deep(.header) {
    width: 100%;

    .title {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .actions {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;

      .add-button {
        text-align: end;
      }
    }
  }
}
</style>
