<template>
  <CatalogPage
    :items="[]"
    :loading="false"
    :total-count="0"
    :with-map="false"
    map-id="main-catalog-map"
  >
    <template #searchBar>
      <UnifiedSearchBar
        :active-tokens="activeTokens"
        :available-chips="availableChips"
        :select-mode="selectMode"
        :search-query="searchQuery"
        @start-select="startSelect"
        @cancel-select="cancelSelect"
        @edit-token="editFilter"
        @remove-token="removeFilter"
        @update:search-query="searchQuery = $event"
      />
    </template>

    <template #empty>
      <CatalogHero @start-select="startSelect" />
    </template>
  </CatalogPage>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const {
  selectMode,
  searchQuery,
  activeTokens,
  availableChips,
  startSelect,
  cancelSelect,
  removeFilter,
  editFilter
} = useCatalogSearch()
</script>
