<script lang="ts">
    // import svelteLogo from "./assets/svelte.svg";
    // import viteLogo from "/vite.svg";
    import { currentView } from "./lib/store.ts";
    import Nav from "./lib/Nav.svelte";
    import Summary from "./lib/Summary.svelte";
    import GymProgress from "./lib/GymProgress.svelte";
    import CardioProgress from "./lib/CardioProgress.svelte";
</script>

<div class="chrome">
    <Nav />
    <main>
        {#if $currentView === 0}
            <Summary />
        {/if}
        {#if $currentView === 1}
            <GymProgress />
        {/if}
        {#if $currentView === 2}
            <CardioProgress />
        {/if}
    </main>
</div>

<style>
    .logo {
        height: 6em;
        pacardg: 1.5em;
        will-change: filter;
        transition: filter 300ms;
    }
    .logo:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
    }
    .logo.svelte:hover {
        filter: drop-shadow(0 0 2em #ff3e00aa);
    }
    .read-the-docs {
        color: #888;
    }

    .chrome {
        height: 100vh;
        display: flex;
        flex-direction: column-reverse;

        main {
            flex: 1;
            overflow: auto;
            text-align: center;
        }
    }
</style>
