<template>
  <o-carousel>
    <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
      <section class="ex-slide" :style="{'background-color': carousel.color }">
        <h1>{{carousel.text}}</h1>
      </section>
    </o-carousel-item>
  </o-carousel>
</template>

<script>
  export default {
    data() {
      return {
        carousels: [
          { text: 'Slide 1', color: '#445e00' },
          { text: 'Slide 2', color: '#006724' },
          { text: 'Slide 3', color: '#b60000' },
          { text: 'Slide 4', color: '#f4c300' },
          { text: 'Slide 5', color: '#005c98' }
        ]
      }
    }
  }
</script>

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="arrow">Arrow</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="arrowHover" :disabled="!arrow">Arrow on hover</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="drag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="repeat">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Items to Show">
          <o-input type="number" v-model.number="perList" min="1" :max="items.length" />
        </o-field>
        <o-field label="Items to List">
          <o-input type="number" v-model.number="increment" min="1" :max="items.length - 1" />
        </o-field>
      </o-field>
    </div>
    <o-carousel v-model="values" :arrow="arrow" :arrow-hover="arrowHover" :items-to-show="perList" :items-to-list="increment" :repeat="repeat" :has-drag="drag">
      <o-carousel-item v-for="(item, i) in items" :key="i">
        <img :src="item.image" />
      </o-carousel-item>
    </o-carousel>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        arrow: true,
        arrowHover: true,
        drag: true,
        values: 1,
        perList: 4,
        increment: 1,
        repeat: false,
        items: [
          {
            title: 'Slide 1',
            image: 'https://picsum.photos/id/1/1230/500'
          },
          {
            title: 'Slide 2',
            image: 'https://picsum.photos/id/2/1230/500'
          },
          {
            title: 'Slide 3',
            image: 'https://picsum.photos/id/3/1230/500'
          },
          {
            title: 'Slide 4',
            image: 'https://picsum.photos/id/4/1230/500'
          },
          {
            title: 'Slide 5',
            image: 'https://picsum.photos/id/5/1230/500'
          },
          {
            title: 'Slide 6',
            image: 'https://picsum.photos/id/6/1230/500'
          },
          {
            title: 'Slide 7',
            image: 'https://picsum.photos/id/7/1230/500'
          }
        ]
      }
    }
  }
</script>

<template>
  <o-carousel :autoplay="false" :overlay="gallery" @click="switchGallery(true)">
    <o-carousel-item v-for="(item, i) in items" :key="i">
      <a class="image">
        <img :src="item.image" />
      </a>
    </o-carousel-item>

    <template #indicators="{ active, switchTo }">
      <o-carousel :value="active" @input="switchTo($event)" v-bind="al" as-indicator>
        <o-carousel-item v-for="(item, i) in items" :key="i" item-class="img-indicator" item-active-class="img-indicator-active">
          <img :src="item.image" />
        </o-carousel-item>
      </o-carousel>
    </template>
    <template #overlay>
      <o-icon v-if="gallery" icon="times" root-class="ex-close-icon" clickable @click.native="switchGallery(false)" />
      <div style="color: #ffffff; text-align: center">
        Hello, I'm an overlay!
      </div>
    </template>
  </o-carousel>
</template>

<script>
  export default {
    data() {
      return {
        gallery: false,
        al: {
          itemsToShow: 2,
          breakpoints: {
            768: {
              itemsToShow: 4
            },
            960: {
              itemsToShow: 6
            }
          }
        },
        items: [
          {
            title: 'Slide 1',
            image: 'https://picsum.photos/id/1/1230/500'
          },
          {
            title: 'Slide 2',
            image: 'https://picsum.photos/id/2/1230/500'
          },
          {
            title: 'Slide 3',
            image: 'https://picsum.photos/id/3/1230/500'
          },
          {
            title: 'Slide 4',
            image: 'https://picsum.photos/id/4/1230/500'
          },
          {
            title: 'Slide 5',
            image: 'https://picsum.photos/id/5/1230/500'
          },
          {
            title: 'Slide 6',
            image: 'https://picsum.photos/id/6/1230/500'
          },
          {
            title: 'Slide 7',
            image: 'https://picsum.photos/id/7/1230/500'
          }
        ]
      }
    },
    methods: {
      switchGallery(value) {
        this.gallery = value
        if (value) {
          document.documentElement.classList.add('o-clipped')
        } else {
          document.documentElement.classList.remove('o-clipped')
        }
      }
    }
  }
</script>

<style>
  .image img {
    display: block;
    height: auto;
    width: 100%;
  }
  .img-indicator {
    filter: grayscale(100%);
  }
  .img-indicator-active {
    filter: grayscale(0%);
  }
  .ex-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    z-index: 99;
  }
</style>

<template>
  <section>
    <div class="example-component">
      <o-field grouped group-multiline>
        <div class="control">
          <o-switch v-model="autoPlay">Autoplay</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="pauseHover" :disabled="!autoPlay">Pause on hover</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="drag">Drag event</o-switch>
        </div>
        <div class="control">
          <o-switch v-model="repeat" :disabled="!autoPlay">Repeat</o-switch>
        </div>
      </o-field>
      <o-field grouped group-multiline>
        <o-field label="Value">
          <o-input type="number" v-model.number="carousel" min="0" :max="carousels.length - 1" />
        </o-field>
        <o-field label="Interval">
          <o-input type="number" v-model.number="interval" min="0" step="1000" :disabled="!autoPlay" />
        </o-field>
      </o-field>
    </div>

    <o-carousel v-model="carousel" :has-drag="drag" :autoplay="autoPlay" :pause-hover="pauseHover" :interval="interval" :repeat="repeat">
      <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
        <section class="ex-slide" :style="{'background-color': carousel.color }">
          <h1>{{carousel.title}}</h1>
          <o-input :placeholder="carousel.title"></o-input>
          <p>A link that <a href="#arrow">goes to arrow</a></p>
        </section>
      </o-carousel-item>
    </o-carousel>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        carousel: 0,
        animated: 'slide',
        drag: false,
        autoPlay: false,
        pauseHover: false,
        pauseInfo: false,
        repeat: false,
        interval: 3000,
        carousels: [
          { text: 'Slide 1', color: '#445e00' },
          { text: 'Slide 2', color: '#006724' },
          { text: 'Slide 3', color: '#b60000' },
          { text: 'Slide 4', color: '#f4c300' },
          { text: 'Slide 5', color: '#005c98' }
        ]
      }
    }
  }
</script>