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

  let posts = [1,2,3,4,5,6,7,8,9,10];
  let pins = [1,2,3,4];
  import { holder } from '../../lib/imgholder.js';
</script>

<style>

  a {
    color: var(--color);
  }

  content {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    flex: flex-grow;
    flex-basis: 100%;
    padding: 1rem;
  }

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

  nav {
    flex: 1;
  }

  button {
    padding: 0.5rem;
  }

  profile {
    display: flex;
    flow-direction: row;
  }

  profile figure {
    padding-right: 3rem;
    padding-left: 3rem;
  }

  profile info {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  profile info p {
    padding: 0.5rem;
  }

  tabs nav {
    justify-content: center;
    border-top: 1px black solid;
    border-color: var(--color-inactive);
  }

  posts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

  }

  pins {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
</style>


<content>
  <header>
    <nav>
      <b><Icon name="instagram" color="var(--color-text)" /> Instagram</b>
      <input placeholder="Search">
      <ul>
        <li><button>Log In</button></li>
        <li><a>Sign Up</a></li>
      </ul>
    </nav>
  </header>

  <profile>
    <figure>
      <img alt="Zed's Face" src="{ holder(256,256) }">
    </figure>

    <info>
      <p>
        <b>zedshaw</b> <button>follow</button>
      </p>

      <p>
        <b>280</b> posts <b>4,695 followers</b> <b>1,778 following</b>
      </p>

      <p><b>Zed A. Shaw</b></p>
      <p>Painter in oil, watercolor, and pastel. I’m doing live streams of little paintings on Twitch:<br>
        <a href="www.twitch.tv/zedashaw">www.twitch.tv/zedashaw</a>
      </p>
    </info>
  </profile>

  <pins>
  {#each pins as pin}
    <figure>
      <img alt="Stock photo" src="{ holder(82,82) }">
    </figure> 
  {/each}
  </pins>

  <tabs>
    <nav>
      <ul>
        <li><Icon name="grid" color="var(--color-text)" /> POSTS</li>
        <li><Icon name="movie" color="var(--color-text)" /> REELS</li>
        <li><Icon name="tv" color="var(--color-text)" /> TV</li>
        <li><Icon name="user" color="var(--color-text)" /> TAGGED</li>
      </ul>
    </nav>
  </tabs>

  <posts>
  {#each posts as post}
    <figure>
      <img alt="Stock photo" src="{ holder(300,300) }">
    </figure> 
  {/each}
  </posts>
</content>

<CodeView source="/code/Instagram" notes="/code/Instagram.notes.html" />
