<script>
  import { link } from 'svelte-spa-router';
  import Icon from '../components/Icon.svelte';
</script>

<style>
  content {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    flex: flex-grow;
    flex-basis: 100%;
    grid-column: 1/3;
    padding: 1rem;
  }

  header {
    display: flex;
    flex: flex-grow;
    width: 100%;
    flex-direction: row;
    padding: unset;
  }

  nav {
    flex: 1;
  }

  figure {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
  }

  search {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 2rem;
  }

  search input {
    align-self: center;
    width: 50ch;
  }

  search buttons {
    display: flex;
    justify-content: space-evenly;
  }

  button {
    padding: 0.5rem;
    background-color: #ddd;
    border: unset;
    color: #000;
    font-weight: unset;
  }

  nav {
    font-weight: normal;
  }

  a {
    color: unset;
    font-weight: normal;
  }
</style>


<content>
  <header>
    <nav>
      <nav-left>
        <a>About</a>
        <a>Store</a>
      </nav-left>
      <ul>
      <li>Gmail</li>
      <li>Image</li>
      <li><Icon name="grid" color="#000" /></li>
      <li><button>Sign In</button></li>
      </ul>
    </nav>
  </header>

  <figure>
    <a href="/demos/google" use:link>
      <img src="http://via.placeholder.com/500x200?text=Google+Doodle">
    </a>
  </figure>

  <search>
  <input type="text">
    <buttons>
      <button>Google Search</button>
      <button>I'm Feeling Lucky</button>
    </buttons>
  </search>

</content>
