<script>
  import Navbar from './lib/Navbar.svelte'
  import { onMount } from 'svelte';
  import Tile from './lib/Tile.svelte';

  let items = [];
  let loading = true;
  let error = null;

onMount(async () => {
  try {
    const res = await fetch('http://localhost:8000/dropout/series');
    if (!res.ok) throw new Error(`Server responded with ${res.status}`);
    items = await res.json();
  } catch (err) {
    console.error('Fetch error:', err);
    error = err.message;
  } finally {
    loading = false;
  }
});

</script>

<Navbar />

{#if loading}
  <p>Loading...</p>
{:else if error}
  <p style="color: red;">{error}</p>
{:else}
  <div style="display: flex; flex-wrap: wrap;">
    {#each items as item (item.ID)}
      <Tile
        id={item.ID}
        link={item.LINK}
        show={item.SHOW}
      />
    {/each}
  </div>
{/if}
