<script lang="ts">
import Spacer from "$lib/Layout/Spacer.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";
import locale from "$stores/locale";

let tool = "default";
</script>

<Picker {tool} />

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

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

          <Spacer />

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

  <Spacer />

  <blockquote style="margin: 0 0 0 1.5rem;">
    {$locale().routes?.toolsFeedbackPrefix}
    <a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a>
    {$locale().routes?.toolsFeedbackSuffix}
  </blockquote>
</div>

<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>
