<template>
  <div class="outline">
    <div class="outline-title">{{ $t('leftPanel.outlines') }}</div>
    <div v-if="outlines.length" class="outlines-container">
      <Outlines v-for="outline in outlines" :outline="outline" />
    </div>
    <div v-else class="no-outlines">
      {{ $t('leftPanel.noOutlines') }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDocumentStore } from '@/stores/modules/document'
const useDocument = useDocumentStore()

const outlines = computed(() => useDocument.getOutlines)
</script>

<style lang="scss">
.outline {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.outlines-container {
  flex-grow: 1;
  overflow-y: auto;
}
.outline-title {
  margin: 0;
  padding: 9px 16px;
  line-height: 17px;
  font-size: 14px;
  font-weight: bold;
  color: var(--c-side-title);
}
.no-outlines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  font-weight: 700;
  color: var(--c-side-text);
  font-size: 14px;
  line-height: 16px;
}
</style>
