<script>
    const lines = 5;
</script>

<div class="container">
    <div class="header">
        <div class="select">
            <select name="heats" id="heats">
                <option value="uno">Uno</option>
                <option value="due">Due</option>
            </select>
        </div>
        <div class="timer">
            <a href="/">00:00</a>
        </div>
        <div class="button">
            <button>START</button>
        </div>
    </div>
    {#each Array(lines) as _}
        <div class="line">
            <div class="pri">
                <h1>P</h1>
            </div>
            <div class="color">

            </div>
        </div>
    {/each}
</div>

<style>
    a:link, a:hover, a:visited, a:active {
        text-decoration: none;
        color:bisque;
    }

    .container {
        display: grid;
        grid-gap: 5px;
        grid-auto-flow: row;
    }

    .header {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-areas: 
            "select timer button";
        grid-template-rows: 4rem;
        align-items: center;
        background-color: darkblue;
    }

    .select {
        grid-area: select;
        justify-self: start;
        margin-left: 5px;
    }

    .timer {
        grid-area: timer;
        text-align: center;
        color: beige;
        font-size: 3.5rem;
    }

    .button {
        grid-area: button;
        justify-self: end;
        margin-right: 5px;
    }

    .line {
        display: grid;
        grid-gap: 4px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 4rem;
        grid-template-areas: 
            "pri color color color color color";
        align-items: center;
    }

    .pri {
        grid-area: pri;
        width: 100%;
        height: 100%;
        background-color: red;
        text-justify: center;
        text-align: center;
        font-size: 1.5rem;
        border-radius: 10px;
    }

    .color {
        grid-area: color;
		width: 100%;
        height: 100%;
        background-color: blue;
        justify-self: end;
    }

</style>