<script lang="ts">
    import { onMount, onDestroy } from 'svelte';
    import Layout from './lib/Layout.svelte'
    import LoginForm from './lib/LoginForm.svelte';
    import DataView from './lib/DataView.svelte';
    import { authenticated } from './stores/auth';
</script>

<main>
    <Layout>
    {#if !$authenticated}
        <LoginForm />
    {:else}
        <DataView />
    {/if} 
    </Layout>
</main>

<style>
  .logo {
    height: 6em;
    padding: 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;
  }
  
  .error {
    font-size: 0.75em;
    color: red;
  }
</style>
