<script>
    import Logo from "$lib/img/topscorer_logo_web.png"

    $: heats = [];

    loadHeats();

    async function loadHeats() {
        const res = await fetch(`/api/loadheats`);
        const data = await res.json();
        for  (let i in data) {
            heats = [...heats, data[i]];
            console.log(`${i} retval: ${JSON.stringify(data[i])}`);	
        }
    }
</script>

<div class="header">
    <img class="img" src={Logo} alt="logo">
    <span class="title" style="color: aliceblue;">Heat Draws</span>
</div>

<hr>

{#each heats as heat}
    <table>
        <tr>
            {#if heat.status === 'running'}
                <th colspan="2" class="running">
                    {heat.name} ({heat.number}) {heat.category}
                </th>
            {:else if heat.status === 'ended'}
                <th colspan="2" class="ended">
                    {heat.name} ({heat.number}) {heat.category}
                </th>
            {:else}
                <th colspan="2">
                    {heat.name} ({heat.number}) {heat.category}
                </th>
            {/if}
        </tr>
        {#each heat.surfers as surfer }
            <tr>
                <td>
                    {surfer.name}
                </td>
                <td style="background-color: {surfer.color};">
                    {surfer.color}
                </td>                
            </tr>
        {/each}    
    </table>
    <hr>
{/each}

<style>
     .header {
         background-color: black;
         display: flex;        
         width: 100%;
         justify-content: space-between;
         text-align: center;
         align-items: center;
     }
 
     .header .img {
         height: 3rem;
     }
 
     .header .title {
         font-size: 3rem;        
         margin: 0 auto;
     }

     table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
    }

    th.running {
        background-color: green;
        animation: blinker 2s linear infinite;
    }

    th.ended {
        background-color: lightcoral;
        text-decoration: line-through 1px lightyellow;
    }

    @keyframes blinker {
        50% {
            opacity: 0.5;
        }
    }

</style>