<script lang="ts">
    import {onMount} from 'svelte'
    import { GetModpacks, QuerryModpacks } from '../wailsjs/go/main/ModpackManager';

    var modpacks = []
    var selectedPack = []

    onMount(() => {
        QuerryModpacks().then(() => {
            GetModpacks().then((result) => {
                modpacks = result
                pack = modpacks[0]
            })
        })   
    })

    function select(modpack) {
        selectedPack = modpack
    }
</script>
<main>
    <p>Selectec pack: {selectedPack.Name}</p>
    <div class="container">
        <div class="modpackList">
            {#each modpacks as pack}
                {#if pack == selectedPack}
                    <button on:click={select(pack)} class="modpackElementSelected">{pack.Name}</button>
                {:else}
                    <button on:click={select(pack)} class="modpackElement">{pack.Name}</button>
                {/if}
            {/each}
        </div>
        <div class="modpackOptions">
        </div>
    </div>

</main>
<style>
* {
    display: box;
   box-sizing: border-box;
    font-family: sans-serif;
    --text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-primary: #23232e;
		--bg-secondary: #141418;
    width: 100%;
        
}
.container{
    display: flex;
    justify-content: left;
    margin: 3rem;
}
.modpackList {
    display: flex;
    flex-direction: column;
    background-color: #141418;
    float: left;
    width: 60%;
    height: 20em;
    align-items: center;
    gap: 2px;
}
.modpackList button {
    border: none;
    color: inherit;
}
.modpackElement {
    width: 100%;
    background-color: #23232e;
}

.modpackElement:hover {
    background-color: #303030;
}

.modpackElementSelected {
    width: 100%;
    background-color: #707070;
}

.modpackElementSelected:hover {
    background-color: #303030;
}

</style>
