<script webc:setup>
  const characters = Object.keys($data.collections).filter((coll) => coll !== 'all');

  const getCharacterName = (name) => $data.collections[name][0].data.getFullName();
  const getDescription = (name) => $data.collections[name][0].data.description;
  const getAvatar = (name) => `src/img/${name}/avatar.png`;
  const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
</script>

<main>
  <header>
    <h1>Welcome!</h1>
    <p>Select your character:</p>
  </header>

  <div class="characters">
    <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
      <eleventy-image
        slot="image"
        :src="getAvatar(char)"
        :alt="getAltText(char)"
        :width="[500,1000]"
      ></eleventy-image>
      <h2 slot="title" @text="getCharacterName(char)"></h2>
      <p @text="getDescription(char)"></p>
    </card>
  </div>
</main>

<style>
  main {
    max-width: 130ch;
    margin: auto;
    padding: 1em;
  }

  header {
    text-align: center;

    & h1 {
      font-size: clamp(3.5em, 5vw, 7em);
      margin-block: clamp(0.25em, 1.75vw, 0.375em);
    }

    & p {
      font-size: clamp(1.25em, 1.5vw, 2.25em);
      margin-block: clamp(0.25em, 10vw, 1em);
    }
  }

  .characters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
    gap: 1.5em;
  }
</style>
