---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CarouselCard from '@shared/components/cards/CarouselCard.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Carousel" pageMenu="base.carousel" description="A carousel cycles through a set of slides, with optional indicators and controls.">
  <DocsLink slot="page-header-actions" path="/ui/components/carousel" />

  <div class="row row-cards">
    <div class="col-md-6">
      <CarouselCard id="default" />
    </div>
    <div class="col-md-6">
      <CarouselCard id="indicators" title="Carousel with indicators" indicators offset={5} />
    </div>
    <div class="col-md-6">
      <CarouselCard id="controls" title="Carousel with controls" controls offset={10} />
    </div>
    <div class="col-md-6">
      <CarouselCard id="captions" title="Carousel with captions" captions controls offset={15} />
    </div>
    <div class="col-md-6">
      <CarouselCard id="indicators-dot" title="Carousel with dot indicators" indicators indicatorsDot offset={20} fade />
    </div>
    <div class="col-md-6">
      <CarouselCard id="indicators-thumb" title="Carousel with thumbnail indicators" indicators indicatorsThumb indicatorsThumbRatio offset={25} fade />
    </div>
    <div class="col-md-6">
      <CarouselCard id="indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators indicatorsVertical indicatorsDot offset={30} fade />
    </div>
    <div class="col-md-6">
      <CarouselCard id="indicators-thumb-vertical" title="Carousel with vertical thumbnail indicators" indicators indicatorsVertical indicatorsThumb indicatorsThumbRatio offset={22} fade />
    </div>
  </div>
</DefaultLayout>