<script>
  import Icon from '../components/Icon.svelte';
  import { holder } from '../../lib/imgholder.js';
</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>
    <figure class="active">
      <img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }">
      <figcaption>Image 1</figcaption>
    </figure> 

    <!-- this image is not seen until set active -->
    <figure>
      <img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }">
      <figcaption>Image 2</figcaption>
    </figure> 
    <prev><Icon name="arrow-left" size="48" /></prev>
    <next><Icon name="arrow-right" size="48" /></next>
  </carousel>
</content>
