<script lang="ts">

// Now called LoginPage

  // import Header from "./Header.svelte";
  import Footer from "../components/Footer.svelte";
	import Login from "./Login.svelte";
  import Tabs from "../shared/Tabs.svelte"
  import Card from "../pieces/Card.svelte"
// tmp
let login = { username: '', password: ''};
  // let's us track any errors in a submited form
  let errors = { username: '', password: ''};
  let valid:boolean = false;
	const loginHandler = () => {
		console.log('hi');
	};
  const createAccountHandler = () => {
		console.log('hi');
	};

// Tabs
  let items: string[] = ['Login', 'Create Account'];
	let activeItem: string = 'Login';
	
	const tabChange = (e) => {
		activeItem = e.detail;
	};

// TMP for switching page, down the line this will be down by modifying url

</script>

<!-- New New Approach -->
<!-- if i were to do all this with CSS Grids how would i do it? -->
<!-- Things i want -->
<!-- A title button, some nav buttons, a giant dope canvas and words over it -->
<!-- not sure if i want: login and create account -->
<!-- let's start with just the canvas -->




<!-- New aproach -->
<!-- just make the html in order you can move it around all you want into special Compoenents later -->

<!-- Ok i think all of this needs to go in a Home Page Component -->
<!-- and then i make another master component for the main page once you're logged in, no idea what that should look like -->

<!-- what if i kept the special canvas header in here and made another generic header for the rest of the site as a component -->

<header class="banner">
	<!-- top left corner, sticky -->
	<h1>Potato Pong</h1>
	<!-- top right but it takes you down the page -->
	<h2>Login</h2>

	<!-- all this used to be in Welcome Section -->
	<!-- the amazing backround! not sure yet if it should scroll with us or be the size of the View Port... -->
	<!-- <canvas></canvas> -->
	<!-- i think maybe the canvas needs to be in the header -->
	<!-- using an image for now as a placehodler for the canvase -->
	<img src="/img/tmp_mario_banner.png" alt="tmp Mario banner">
	<div class="welcome">
		<h2>Welcome to <br><span>Potato Pong</span></h2>
	</div>
	<!-- I want some sort of arrow pointing down and blinking to indicate you should scroll -->
</header>
<!-- <section class="banner"> -->
<section class="welcome">
	
</section>
<!-- no nav on home page -->
<section class="register">

	<!-- i could have a toggle tab to login or create a new account -->

  <Tabs items={items} {activeItem} on:tabChange={tabChange}/>
	{#if activeItem === 'Login'}
		<div class="card">
      <Card>
      <h2>Login</h2>
      <form on:submit|preventDefault={loginHandler}>
        <div class="form-field">
          <input type="text" id="username" placeholder="username" bind:value={login.username}>
          <div class="error">{ errors.username }</div>
        </div>
        <div class="form-field">
          <input type="password" id="password" placeholder="password" bind:value={login.password}>
          <div class="error">{ errors.password }</div>
        </div>
        <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
        <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
        <button>Login</button>
      </form>
      </Card>
    </div>
	{:else if activeItem = 'Create Account'}
    <!-- Create Account -->
    <div class="card">
      <Card>
        <h3>Create Account</h3>
        <form on:submit|preventDefault={createAccountHandler}>
          <div class="form-field">
            <input type="text" id="username" placeholder="username" bind:value={login.username}>
            <div class="error">{ errors.username }</div>
          </div>
          <div class="form-field">
            <input type="password" id="password" placeholder="password" bind:value={login.password}>
            <div class="error">{ errors.password }</div>
          </div>
          <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
          <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
          <button>Login</button>
        </form>
      </Card>
    </div>
	{/if}


</section>
<!-- below this i could say, this is where i might have put an explanation of what you can do on this page but fuck you i didn't -->
<!-- or maybe in the end i will, something like: Fun, Game, Colors, enjoy Friendship, or don't, it's your choice! -->
<Footer />



<style>
  /* hearder stuff */
	
/* Clearly i have yet to master floating stuff... */
/* i need to put box-sizing in here somewhere for the login... */

/* starting again with CSS Grid */
  /* .banner{
		position: relative;
	}
	.banner img{
    max-width: 100%;
	}

	.banner h1{
		position: absolute;
		left: 0;
		top: 10px;
	}
	.banner h2{
		position: absolute;
		left: 90%;
		top: 10px;
	}
	.banner .welcome{
    background-color: #feb614;
    color:white;
    padding: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
	}
	.banner .welcome h2{
			font-size: 58px;
	}
	.banner .welcome h2 span{
			font-size: 1.3em;
	}

  .register{
    
  } */


</style>