<script setup lang="ts">
const search = ref("")
</script>

<template>
  <UDashboardNavbar>
    <template #center>
      <h1
          :class="['text-xl','font-medium']"
      >Zentrales Logbuch</h1>
    </template>
    <template #right>
      <UInput
          id="searchinput"
          v-model="search"
          icon="i-heroicons-magnifying-glass"
          placeholder="Logbuch durchsuchen..."
          class="w-72 max-w-full"
      >
        <template #trailing v-if="search">
          <UButton
              color="neutral"
              variant="link"
              icon="i-heroicons-x-mark"
              :padded="false"
              aria-label="Suche löschen"
              @click="search = ''"
          />
        </template>
      </UInput>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <HistoryDisplay :search="search"/>
  </UDashboardPanelContent>
</template>

<style scoped>

</style>
