<script lang="ts">
  import EasterEgg from '$lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte';
  import HeadTitle from '$lib/Home/HeadTitle.svelte';
  import Picker from '$lib/Tools/Picker.svelte';
  import { tools } from '$lib/Tools/tools.js';
  import root from '$lib/Utility/root';

  let tool = 'default';
</script>

<Picker {tool} />

<HeadTitle route={tools[tool].name()} path={`/tools?tool=${tool}`} />

<div class="card" id="easter-target">
  <div class="tool-grid">
    {#each Object.keys(tools).filter((t) => t !== 'default' && !tools[t].hidden) as t}
      <a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>
        <div class="tool-grid-tool card">
          <span class="title">
            {tools[t].name()}
          </span>

          <p />

          {#if tools[t].description}
            <span class="description">
              {tools[t].description?.()}
            </span>
          {/if}
        </div>
      </a>
    {/each}
  </div>

  <p />

  <blockquote style="margin: 0 0 0 1.5rem;">
    Have any requests for cool tools that you think others might find useful? Send a private message
    to
    <a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
  </blockquote>
</div>

<EasterEgg id={5} />

<style lang="scss">
  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
  }

  .tool-grid-tool {
    display: flex;
    flex-direction: column;
    height: 100%;
    $delay: 0.25s;
    transition: transform $delay ease;

    .description {
      // font-size: 0.9rem;
      color: var(--fg);
    }

    &:hover {
      transform: scale(1.05);
      position: relative;
      z-index: 2;
      transition: transform $delay ease;
    }
  }

  .title {
    font-weight: 500;
  }
</style>
