<script lang="ts">
  import { user } from '../stores/User.js';
	import Header from './Header.svelte';
	import '../app.css';

  const date = new Date();
</script>
	

<div class="bg-gray-100">
  {#if $user.status}
    <Header />
  {/if}

	<main class="flex min-h-screen { $user.status ? 'items-start' : 'items-center'} justify-center px-4 py-12 sm:px-6 lg:px-8">
		<slot />
	</main>

  {#if $user.status}
    <footer class="bg-primary-950 text-white w-full flex justify-center p-3">
      <div class="max-w-screen-xl w-full flex justify-between">
        <div>
          <span class="text-[#ff0000]">&hearts;</span> ASKÖ Ruderverein Donau Linz
        </div>
        <div>
          &copy; {date.getFullYear()}
        </div>
      </div>
    </footer>
  {/if}
</div>


