<script setup lang="ts">
import { Button } from '@/components/ui/button'
import NodeFiltersContent from '@/components/filters/NodeFiltersContent.vue'
import { useUiStore } from '@/stores/uiStore'
import { useSidebar } from '@/components/ui/sidebar'

const uiStore = useUiStore()
const { open } = useSidebar()
</script>

<template>
  <div class="flex-1 overflow-y-auto" :class="{ 'hidden': !open }">
    <!-- Node Filters -->
    <div class="border-b border-t">
      <!-- Header with Clear button -->
      <div class="flex items-center justify-between px-3 py-3 bg-sidebar-accent">
        <span class="text-sm font-medium text-foreground">Node filters</span>
        <Button
          v-if="uiStore.hasActiveNodeFilters"
          variant="link"
          size="sm"
          class="h-auto p-0"
          @click="uiStore.clearNodeFilters"
        >
          Clear
        </Button>
      </div>

      <NodeFiltersContent class="px-3 py-3" />
    </div>
  </div>
</template>
