<script>
  import Input from "$lib/components/base/Input.svelte";  
    import IconBase from "$lib/components/icons/IconBase.svelte";
    import { onMount } from "svelte";

  let brawlsets = $state([])
  let displayedBrawlsets = $state([])
  let searchQuery = $state("")

  function filterBrawlsets() {
    displayedBrawlsets = brawlsets.filter((brawlset) => brawlset.Name.toLowerCase().includes(searchQuery.toLowerCase()))
  }

  onMount(async () => {
    fetch("/json/misc/brawlsets")
        .then( response => response.json() )
        .then( data => { brawlsets = displayedBrawlsets = data; console.log(data) } )
  })
  
</script>

<div class="m-auto max-w-4xl flex flex-col gap-4 p-8">
  <Input oninput={filterBrawlsets} bind:value={searchQuery} type="text" placeholder="Rechercher des brawlsets" autofocus/>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
    {#each displayedBrawlsets as brawlset}
      <a class="flex flex-row gap-2 items-center" href={"/bset/" + brawlset.SanitizedName}>
        <div class="flex flex-row items-center">
          {#each brawlset.IconsSvgUri as icon}
            <IconBase src={icon} alt={"Set icon for " + brawlset.Name} />
          {/each}
        </div>
        <span>{brawlset.Name}</span>
      </a>
    {/each}
  </div>
</div>
