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

<DefaultLayout title="Carousel" pageHeader="Carousel" pageMenu="base.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>