<script setup lang="ts">
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
import { SPECIES } from '@/garden_data'

const sortedSpecies = [...SPECIES].sort((a, b) =>
  a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
)
</script>
<template>
  <header>
    <h1>My Home's Garden</h1>
  </header>
  <main>
    <p>On this page, you'll find a list of all plants currently (or formerly) in my garden.</p>
    <p>
      I keep a spreadsheet of all the species in my garden (or that have been present in the past).
      In total, my garden currently has <strong>52 unique species</strong>, with
      <strong>37 native species</strong>.
    </p>
    <p>
      <a href="/gardening" class="link-local">Back to gardening</a>
    </p>

    <div class="garden-cards-container">
      <GardenSpeciesCard
        v-for="species in sortedSpecies"
        :key="species['Scientific Name']"
        :species="species"
        style="width: 300px"
      />
    </div>
  </main>
</template>
<style scoped>
h1 {
  text-align: center;
}

p {
  max-width: 50ch;
  margin: 1rem auto;
}

.garden-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* No margins for the cards when in flex mode. */
.garden-species-card {
  margin: 0;
}
</style>
