<script>
  import Icon from '../components/Icon.svelte';

  let cards = [1,2,3,4];
</script>

<style>

  content {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    flex: flex-grow;
    flex-basis: 100%;
    grid-column: 1/3;
    padding: 1rem;
    --sub-color: #999;
    --title-color: #000;
  }

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

  nav {
    flex: 1;
  }

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

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

  button {
    background-color: var(--color-bg);
    color: var(--color);
    padding: 0.5rem;
    border-radius: 2px;
  }

  main {
    display: flex;
    flex-direction: row;
  }

  figcaption a {
    color: var(--color-secondary);
    font-size: 0.8em;
  }

  figcaption p {
    font-weight: bold;
    margin-top: unset;
  }

  figcaption video-actions {
    color: var(--sub-color);
    font-weight: unset;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
  }
</style>


<content>
  <header>
    <nav>
      <nav-left>
        <a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
      </nav-left>
      <input id="search" placeholder="Search" name="search">
      <ul>
        <li><Icon name="camera" color="#000" /></li>
        <li><Icon name="more-vertical" color="#000" /></li>
        <li><Icon name="grid" color="#000" /></li>
        <li><button><Icon name="user" /> Sign In</button></li>
      </ul>
    </nav>
  </header>
  <main>
    <left>
      <figure>
        <img src="https://via.placeholder.com/800x450?text=Video">
        <figcaption>
          <a>#tag</a> <a>#anothertag</a>
          <p>Title And Stuff</p>
          <video-actions>
            <likes>Stats Stats</likes>
            <video-buttons>
              <Icon name="thumbs-up" color="#999" /> 1.1K
              <Icon name="thumbs-down" color="#999" /> 22
              <Icon name="corner-up-right" color="#999" /> SHARE
              <Icon name="menu" color="#999" /> SAVE
              <Icon name="vertical-more" />
            </video-buttons>
          </video-actions>
        </figcaption>
      </figure>
  </main>
</content>
