<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import AnnouncementListView from '../AnnouncementListView.vue';

const route = useRoute();
const { t } = useI18n();

const isDetailRoute = computed(
  () => route.path.startsWith('/announcements/') && Boolean(route.params.id),
);
</script>

<template>
  <div class="desktop-layout-hub desktop-hub-page">
    <aside class="desktop-hub-left">
      <AnnouncementListView embedded />
    </aside>
    <main class="desktop-hub-right">
      <slot v-if="isDetailRoute" />
      <div v-else class="hub-placeholder">
        {{ t('announcements.select_hint') }}
      </div>
    </main>
  </div>
</template>

<style scoped>
.desktop-hub-page {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.hub-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}
</style>
