
<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];
  let related = [1,2,3,4];
</script>

<style>

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

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

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

  header nav {
    flex: 1;
  }

  header nav input {
    display: flex;
    flex-grow: 2;
    margin: 1rem;
  }

  header nav logo {
    font-weight: bold;
    font-size: 1rem;
    color: black;
  }

  header nav button {
    background-color: var(--color-bg);
    color: var(--color);
    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;

  }

  posts figure {
  }

  related {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  nav a,a:visited,a:active {
    text-decoration: none;
    color: var(--color-text);
  }
</style>


<content>
  <header>
    <nav>
      <b><a id="logo-link" href="/demos/xoracademy" use:link><Icon name="edit-3" color="var(--color-text)" /> Xor.Academy</a></b>
      <input placeholder="Search">
      <ul>
        <li><a href="/demos/login" use:link><button>Log In</button></a></li>
        <li><a>Sign Up</a></li>
      </ul>
    </nav>
  </header>

  <profile>
    <figure>
      <img alt="Module Thumb" src="https://via.placeholder.com/256x256?text=Module+Thumb">
    </figure>

    <info>
      <p>
        <button>Follow</button>
      </p>

      <p>
        <b>10</b> videos <b>4,695 followers</b>
      </p>

      <h3>Drawing Level 1</h3>
      <p>The first module you should take.  It covers the basics of drawing and how to get started
        making drawing a habit.
      </p>
    </info>
  </profile>

  <related>
  {#each related as pin}
    <figure>
      <img alt="Stock photo" src="https://via.placeholder.com/82x82?text=Related">
    </figure> 
  {/each}
  </related>

  <posts>
  {#each posts as post}
    <figure>
      <a href="/demos/xoracademy/watch" use:link>
        <img alt="Placeholder" src="https://via.placeholder.com/300x300?text=Video Thumb">
      </a>
    </figure> 
  {/each}
  </posts>
</content>

<CodeView source="/code/XorAcademy.svelte" />
