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

const directions = ['start', 'end', 'top', 'bottom'];

// Liquid `capitalize` filter.
const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
---

<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas">
	<Card>
		<CardBody>
			{
				directions.map((direction) => (
					<a
						class="btn"
						data-bs-toggle="offcanvas"
						href={`#offcanvas${capitalize(direction)}`}
						role="button"
						aria-controls={`offcanvas${capitalize(direction)}`}
					>
						Toggle {direction} offcanvas
					</a>
				))
			}
		</CardBody>
	</Card>

	{
		directions.map((direction) => (
			<Offcanvas
				direction={direction}
				tabindex="-1"
				id={`offcanvas${capitalize(direction)}`}
				aria-labelledby={`offcanvas${capitalize(direction)}Label`}
			>
				<OffcanvasHeader title={`${capitalize(direction)} offcanvas`} titleId={`offcanvas${capitalize(direction)}Label`}>
					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
				</OffcanvasHeader>
				<OffcanvasBody>
					<div>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat
						illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde.
						Aut!
					</div>
					<div class="mt-3">
						<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
							Close offcanvas
						</button>
					</div>
				</OffcanvasBody>
			</Offcanvas>
		))
	}
</DefaultLayout>