---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Accordion from '@shared/components/ui/Accordion.astro';
import Card from '@shared/components/ui/Card.astro';
import CardBody from '@shared/components/ui/CardBody.astro';
---

<DefaultLayout title="Accordion" pageHeader="Accordion" pageMenu="base.accordion">
	<div class="row row-cards">
		<div class="col-md-6">
			<Card>
				<CardBody>
					<Accordion />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<Accordion type={['flush']} id="flush" />
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<Accordion type={['tabs']} id="tabs" />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<Accordion type={['inverted']} id="inverted" />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<Accordion id="inverted-plus" type={['inverted', 'plus']} toggleIcon="plus" />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<Accordion id="icons" showIcon />
				</CardBody>
			</Card>
		</div>
	</div>
</DefaultLayout>