---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Accordion from '@ui/Accordion.astro'
import Card from '@ui/Card.astro'
import CardBody from '@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>