<template>
  <div class="d-flex flex-column h-100">
    <annotation-tools class="flex-shrink-0" :items="items" />
    <v-divider class="mx-2" />
    <annotation-data-table class="flex-grow-1" :items="items" />
  </div>
</template>

<script setup lang="ts">
import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';

interface Props {
  items: DataOverlayAnnotation[];
}

withDefaults(defineProps<Props>(), {
  items: () => []
});
</script>

<style scoped lang="scss">
:deep(.v-card) {
  display: flex;
  flex-direction: column;
}

:deep(.v-card-text) {
  min-height: 0;
}
</style>
