{#if allPhotos.length > 1}

{#each allPhotos as photo (photo.id)}
• (activePhotoId = photo.id)} aria-label="Show photo" aria-pressed={photo.id === activePhoto?.id} class="block h-16 w-16 overflow-hidden rounded border-2 {photo.id === activePhoto?.id ? 'border-[var(--site-text)]' : 'border-transparent opacity-70 hover:opacity-100'}" >
{/each}

{/if}

{title}

{animal.species}{animal.breed ? ` · ${animal.breed}` : ''}

{#if animal.description}

{animal.description}

{/if}

sightings

{animal.sightings.length}

{#if firstSeen}

first seen

{formatDate(firstSeen)}

{/if} {#if lastSeen}

last seen

{formatDate(lastSeen)}

{/if}

i saw this animal too

sighting history

{#each animal.sightings as s (s.id)}
• {#if s.photos[0]} (activePhotoId = s.photos[0].id)} aria-label="Show photo from {formatDate(s.seenAt)}" class="h-10 w-10 shrink-0 overflow-hidden rounded" > {:else} {/if} {formatDate(s.seenAt)} {#if s.reporterName}by {s.reporterName}{/if}
{/each}