<script lang="ts">
  import { historyStore } from "$lib/history";
  import { labelsStore } from "$lib/labels";
  import PatchBanner from "$lib/components/PatchBanner.svelte";
  import HistoryEntry from "$lib/components/HistoryEntry.svelte";
</script>

<PatchBanner text="Field Log" />

{#if $historyStore.length === 0}
  <p class="empty">No birds detected yet.</p>
{:else}
  <ol>
    {#each $historyStore as entry (entry.detectedAt + entry.labelIndex)}
      <HistoryEntry
        {entry}
        name={$labelsStore[entry.labelIndex]?.commonName ?? "Unknown"}
      />
    {/each}
  </ol>
{/if}

<style>
  .empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--accent-rust);
  }

  ol {
    list-style: none;
    padding: 1rem;
    padding-top: 1.25rem;
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 4rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
</style>