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

  let images = [1,2,3,4,5,6,7];
</script>

<style>
  content {
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    flex: flex-grow;
    padding: 1rem;
  }

  carousel {
    position: relative;
  }

  carousel figure {
    display: none;
  }

  carousel figure.active {
    display: flex;
    position: relative;
    flex-direction: column;
  }

  carousel figure img {
    width: 100%;
  }

  carousel figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2em;
    background: var(--color-bg-secondary);
    opacity: 0%;
  }

  carousel figure figcaption:hover {
    opacity: 90%;
  }

  carousel next,prev {
    position: absolute;
    bottom: 0;
    opacity: 0%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }

  carousel next {
    right: 0;
  }

  carousel prev {
    left: 0;
  }

  carousel next:hover,prev:hover {
    opacity: 60%;
    background-color: var(--color-bg);
  }
</style>

<content>
  <h1>Carousel</h1>

  <carousel>
    {#each images as image}
      <figure class:active={ image === 1 }>
        <img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }">
        <figcaption>Image #{image}</figcaption>
      </figure> 
    {/each}
    <prev><Icon name="arrow-left" size="48" /></prev>
    <next><Icon name="arrow-right" size="48" /></next>
  </carousel>
</content>

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

