<template>
  <div class="flex h-full min-h-0 flex-col">
    <div class="flex items-center gap-1 px-3 py-2 text-[11px] font-semibold tracking-wide text-fg-subtle uppercase">
      {{ t('ide.activity.groups') }}
      <RouterLink :to="{ name: 'groups' }" class="ml-auto rounded p-0.5 hover:bg-surface-2 hover:text-fg" :title="t('nav.groups')">
        <ExternalLink :size="12" />
      </RouterLink>
    </div>
    <div class="min-h-0 flex-1 overflow-auto px-1 pb-2">
      <p v-if="groups.groups.length === 0" class="px-2 py-1 text-xs text-fg-subtle">{{ t('groups.empty') }}</p>
      <RouterLink
        v-for="g in groups.groups"
        :key="g.id"
        :to="{ name: 'group', params: { id: g.id } }"
        class="flex items-center gap-2 rounded px-2 py-1 text-xs text-fg-muted hover:bg-surface-2/60"
      >
        <Boxes :size="13" class="shrink-0 text-fg-subtle" />
        <span class="truncate">{{ g.label }}</span>
        <span class="ml-auto shrink-0 text-[10px] text-fg-subtle">{{ t('groups.repoCount', groups.reposInGroup(g.id).length) }}</span>
      </RouterLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { Boxes, ExternalLink } from '@lucide/vue';
import { useGroupsStore } from '../../stores/groups';

const { t } = useI18n();
const groups = useGroupsStore();
</script>
