---
// Port of preview/pages/all-elements.html — a kitchen-sink of every component.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Button from '@shared/components/Button.astro';
import Alert from '@shared/components/Alert.astro';
import Badge from '@shared/components/ui/Badge.astro';
import Progress from '@shared/components/ui/Progress.astro';
import Select from '@shared/components/ui/Select.astro';
import Check from '@shared/components/ui/form/Check.astro';
import Nav from '@shared/components/ui/Nav.astro';
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
import Pagination from '@shared/components/ui/Pagination.astro';
import Avatar from '@shared/components/ui/Avatar.astro';
import Icon from '@shared/components/Icon.astro';
import Dropdown from '@shared/components/ui/Dropdown.astro';
import Accordion from '@shared/components/ui/Accordion.astro';
import Spinner from '@shared/components/ui/Spinner.astro';
import Rating from '@shared/components/ui/Rating.astro';
import Steps from '@shared/components/ui/Steps.astro';
import StatusDot from '@shared/components/ui/StatusDot.astro';
import Toast from '@shared/components/ui/Toast.astro';
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
import InputGroup from '@shared/components/InputGroup.astro';
import Range from '@shared/components/ui/Range.astro';
import Tag from '@shared/components/ui/Tag.astro';
import Ribbon from '@shared/components/ui/Ribbon.astro';
import Flag from '@shared/components/ui/Flag.astro';
import Payment from '@shared/components/ui/Payment.astro';
import Timeline from '@shared/components/ui/Timeline.astro';
import Empty from '@shared/components/ui/Empty.astro';
import NavSegmented from '@shared/components/ui/NavSegmented.astro';

// Code-block content lives in the frontmatter so Astro does not try to evaluate
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
const codeExample = `// JavaScript example
function greetUser(name) {
   console.log(\`Hello, \${name}!\`);
   return true;
}`;
---

<DefaultLayout
	title="All Elements - Kitchen Sink"
	pageHeader="All Elements"
	pageMenu="base.all-elements"
	pageLibs={['nouislider', 'star-rating.js', 'tabler-flags', 'tabler-payments', 'tom-select']}
>
	<div class="row row-cards">
		<!-- Typography Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Typography</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h1>Heading 1</h1>
							<h2>Heading 2</h2>
							<h3>Heading 3</h3>
							<h4>Heading 4</h4>
							<h5>Heading 5</h5>
							<h6>Heading 6</h6>
						</div>
						<div class="col-md-6">
							<p class="lead">This is a lead paragraph with larger text.</p>
							<p>This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
								<u>underlined text</u>.</p>
							<p><small class="text-muted">This is small muted text.</small></p>
							<p class="text-primary">Primary text color</p>
							<p class="text-success">Success text color</p>
							<p class="text-danger">Danger text color</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Buttons Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Buttons</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h4>Standard Buttons</h4>
							<div class="btn-list mb-3">
								<Button text="Default" />
								<Button text="Primary" color="primary" icon="star" />
								<Button text="Secondary" color="secondary" />
								<Button text="Success" color="success" icon="check" />
								<Button text="Warning" color="warning" />
								<Button text="Danger" color="danger" icon="x" />
								<Button text="Info" color="info" />
							</div>
						</div>
						<div class="col-md-6">
							<h4>Button Sizes</h4>
							<div class="btn-list mb-3 align-items-start">
								<Button text="Small" size="sm" />
								<Button text="Default" />
								<Button text="Large" size="lg" />
							</div>

							<h4>Icon Buttons</h4>
							<div class="btn-list mb-3 align-items-start">
								<Button icon="heart" iconOnly />
								<Button icon="star" iconOnly />
								<Button icon="check" iconOnly />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Cards Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Simple Card</h3>
				</div>
				<div class="card-body">
					<p>This is a simple card with header and body content.</p>
				</div>
			</div>
		</div>

		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Card with Footer</h3>
				</div>
				<div class="card-body">
					<p>This card includes a footer section.</p>
				</div>
				<div class="card-footer">
					<div class="d-flex">
						<a class="btn btn-link">Cancel</a>
						<a class="btn btn-primary ms-auto">Save</a>
					</div>
				</div>
			</div>
		</div>

		<!-- Alerts Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Alerts</h3>
				</div>
				<div class="card-body">
					<Alert type="info" title="This is a primary alert with an icon." />
					<Alert type="success" title="This is a success alert message." />
					<Alert type="warning" title="This is a warning alert message." />
					<Alert type="danger" title="This is a danger alert message." />
				</div>
			</div>
		</div>

		<!-- Badges Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Badges</h3>
				</div>
				<div class="card-body">
					<div class="space-y">
						<div>
							<Badge text="Default" />
							<Badge text="Primary" color="primary" />
							<Badge text="Secondary" color="secondary" />
							<Badge text="Success" color="success" />
							<Badge text="Warning" color="warning" />
							<Badge text="Danger" color="danger" />
						</div>
						<div>
							<Badge text="With Icon" color="primary" icon="star" />
							<Badge text="Light Badge" color="primary" light />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Progress Bars Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Progress Bars</h3>
				</div>
				<div class="card-body">
					<div class="space-y">
						<div>
							<Progress value="25" />
						</div>
						<div>
							<Progress value="50" color="success" />
						</div>
						<div>
							<Progress value="75" color="warning" />
						</div>
						<div>
							<Progress value="90" color="danger" showValue />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Form Elements Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Form Elements</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Text Input</label>
								<input type="text" class="form-control" placeholder="Enter text">
							</div>
							<div class="mb-3">
								<label class="form-label">Email Input</label>
								<input type="email" class="form-control" placeholder="Enter email">
							</div>
							<div class="mb-3">
								<label class="form-label">Password Input</label>
								<input type="password" class="form-control" placeholder="Enter password">
							</div>
							<div class="mb-3">
								<label class="form-label">Select Dropdown</label>
								<Select id="demo-select" values="Option 1,Option 2,Option 3" />
							</div>
						</div>
						<div class="col-md-6">
							<div class="mb-3">
								<label class="form-label">Textarea</label>
								<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
							</div>
							<div class="mb-3">
								<label class="form-label">Checkboxes</label>
								<Check title="Option 1" type="checkbox" />
								<Check title="Option 2" type="checkbox" checked />
							</div>
							<div class="mb-3">
								<label class="form-label">Radio Buttons</label>
								<Check title="Option 1" type="radio" name="radio-demo" />
								<Check title="Option 2" type="radio" name="radio-demo" checked />
							</div>
							<div class="mb-3">
								<label class="form-label">Switch</label>
								<Check title="Enable notifications" switch />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Navigation Elements -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Navigation Elements</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h4>Tabs</h4>
							<div class="mb-3">
								<Nav tabs class="mb-4" />
							</div>

							<h4>Pills Navigation</h4>
							<div class="mb-3">
								<Nav pills class="mb-4" />
							</div>

							<h4>Breadcrumb</h4>
							<Breadcrumb pages="Home,Library,Data" homeIcon />
						</div>
						<div class="col-md-6">
							<h4>Pagination</h4>
							{/* active-item="2" is a STRING in Liquid; `i == "2"` never matches the
							    integer index, so no page renders active — reproduced by passing a string. */}
							<Pagination count={5} activeItem="2" class="mb-4" />

							<h4>Pagination with Text</h4>
							<Pagination count={3} text />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Lists Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Lists</h3>
				</div>
				<div class="card-body">
					<h4>Unordered List</h4>
					<ul>
						<li>First item</li>
						<li>Second item</li>
						<li>Third item</li>
					</ul>

					<h4>Ordered List</h4>
					<ol>
						<li>First item</li>
						<li>Second item</li>
						<li>Third item</li>
					</ol>
				</div>
			</div>
		</div>

		<!-- Table Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Table</h3>
				</div>
				<div class="card-body">
					<div class="table-responsive">
						<table class="table table-vcenter">
							<thead>
								<tr>
									<th>Name</th>
									<th>Email</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>John Doe</td>
									<td>john@example.com</td>
									<td><Badge text="Active" color="success" /></td>
								</tr>
								<tr>
									<td>Jane Smith</td>
									<td>jane@example.com</td>
									<td><Badge text="Pending" color="warning" /></td>
								</tr>
								<tr>
									<td>Bob Johnson</td>
									<td>bob@example.com</td>
									<td><Badge text="Inactive" color="danger" /></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- Avatars Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Avatars</h3>
				</div>
				<div class="card-body">
					<div class="space-y">
						<div>
							<Avatar placeholder="JD" size="sm" />
							<Avatar placeholder="JS" />
							<Avatar placeholder="BJ" size="lg" />
							<Avatar placeholder="AB" size="xl" />
						</div>
						<div>
							<Avatar placeholder="RD" shape="avatar-rounded" />
							<Avatar placeholder="PR" color="primary" shape="avatar-rounded" />
							<Avatar placeholder="SC" color="success" shape="avatar-rounded" />
						</div>
						<div>
							<Avatar icon="user" />
							<Avatar icon="star" color="warning" />
							<Avatar placeholder="ST" status="success" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Icons Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Icons</h3>
				</div>
				<div class="card-body">
					<div class="space-y">
						<div>
							<Icon name="home" />
							<Icon name="user" />
							<Icon name="settings" />
							<Icon name="heart" />
							<Icon name="star" />
							<Icon name="bell" />
							<Icon name="mail" />
							<Icon name="phone" />
							<Icon name="calendar" />
							<Icon name="clock" />
							<Icon name="map-pin" />
							<Icon name="camera" />
							<Icon name="plus" />
							<Icon name="minus" />
							<Icon name="edit" />
							<Icon name="trash" />
							<Icon name="download" />
							<Icon name="upload" />
							<Icon name="search" />
							<Icon name="filter" />
							<Icon name="refresh" />
							<Icon name="share" />
							<Icon name="copy" />
							<Icon name="external-link" />
						</div>
						<div>
							<span class="text-primary"><Icon name="check" /></span>
							<span class="text-success"><Icon name="circle-check" /></span>
							<span class="text-warning"><Icon name="alert-triangle" /></span>
							<span class="text-danger"><Icon name="alert-circle" /></span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Dropdowns Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Dropdowns</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						<Dropdown mainBtn="Primary Dropdown" options="Action, Another action, Something else here" />
						<Dropdown mainBtn="Secondary Dropdown" options="Edit, Copy, Delete" />
					</div>
				</div>
			</div>
		</div>

		<!-- Interactive Elements Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Interactive Elements</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h4>Accordion</h4>
							<div class="mb-4">
								<Accordion count={3} id="demo-accordion" />
							</div>
						</div>
						<div class="col-md-6">
							<h4>Spinners</h4>
							<div class="mb-3">
								<div class="d-flex flex-wrap gap-2">
									<Spinner type="border" color="primary" />
									<Spinner type="border" color="success" size="sm" />
									<Spinner type="grow" color="warning" />
									<Spinner type="grow" color="danger" size="sm" />
								</div>
							</div>

							<h4>Rating</h4>
							<div class="mb-3">
								<Rating id="demo-rating" value="4" />
							</div>

							<h4>Steps</h4>
							<div class="mb-3">
								<Steps count={4} active="2" />
							</div>
							<div class="mb-3">
								<Steps count={4} active="3" numbers />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Status & Feedback Elements -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Status Elements</h3>
				</div>
				<div class="card-body">
					<h4>Status Dots</h4>
					<div class="mb-3">
						<StatusDot color="success" />
						<StatusDot color="warning" />
						<StatusDot color="danger" />
						<StatusDot color="info" animated />
					</div>

					<h4>Toast Notifications</h4>
					<div class="mb-3">
						<Toast toastId="demo-toast" show text="This is a sample toast message!" />
					</div>
				</div>
			</div>
		</div>

		<!-- Enhanced Form Elements -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Enhanced Forms</h3>
				</div>
				<div class="card-body">
					<h4>Input with Icons</h4>
					<div class="mb-3">
						<InputIcon placeholder="Search..." icon="search" />
					</div>
					<div class="mb-3">
						<InputIcon placeholder="Loading..." loader />
					</div>

					<h4>Input Groups</h4>
					<div class="mb-3">
						<InputGroup prepend="@" placeholder="Username" />
					</div>
					<div class="mb-3">
						<InputGroup append=".00" prepend="$" placeholder="Price" />
					</div>

					<h4>Range Slider</h4>
					<div class="mb-3">
						<Range id="demo-range" min={0} max={100} value="50" />
					</div>
				</div>
			</div>
		</div>

		<!-- Tags & Labels -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Tags & Labels</h3>
				</div>
				<div class="card-body">
					<h4>Tags</h4>
					<div class="mb-3">
						<Tag text="Primary Tag" icon="star" />
						<Tag text="Success Tag" status="success" />
						<Tag text="Warning Tag" status="warning" />
					</div>

					<h4>Ribbons</h4>
					<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
						<Ribbon text="New" color="success" />
					</div>
					<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
						<Ribbon text="Sale" color="danger" top />
					</div>
				</div>
			</div>
		</div>

		<!-- Media Elements -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Media Elements</h3>
				</div>
				<div class="card-body">
					<h4>Flags</h4>
					<div class="mb-3">
						<div class="d-flex flex-wrap gap-2">
							<Flag flag="us" />
							<Flag flag="gb" />
							<Flag flag="de" />
							<Flag flag="fr" />
							<Flag flag="pl" />
							<Flag flag="es" />
							<Flag flag="it" />
							<Flag flag="nl" />
							<Flag flag="ca" />
							<Flag flag="au" />
						</div>
					</div>

					<h4>Payment Icons</h4>
					<div class="mb-3">
						<div class="d-flex flex-wrap gap-2">
							<Payment payment="visa" />
							<Payment payment="mastercard" />
							<Payment payment="paypal" />
							<Payment payment="americanexpress" />
							<Payment payment="applepay" />
							<Payment payment="google-pay" />
							<Payment payment="stripe" />
							<Payment payment="discover" />
							<Payment payment="jcb" />
							<Payment payment="maestro" />
							<Payment payment="dinersclub" />
							<Payment payment="bitcoin" />
							<Payment payment="ethereum" />
							<Payment payment="klarna" />
							<Payment payment="venmo" />
							<Payment payment="square" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Timeline Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Timeline</h3>
				</div>
				<div class="card-body">
					<Timeline />
				</div>
			</div>
		</div>

		<!-- Empty State Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Empty State</h3>
				</div>
				<div class="card-body">
					<Empty
						title="No data found"
						subtitle="Try adjusting your search or filter to find what you're looking for."
						illustration="boy-girl.svg"
						buttonText="Add new item"
						buttonIcon="plus"
					/>
				</div>
			</div>
		</div>

		<!-- Modal Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Modals</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
							Open Modal
						</button>
						<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
							Success Modal
						</button>
					</div>

					<!-- Demo Modal -->
					<div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Title</h5>
									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
								</div>
								<div class="modal-body">
									<p>This is a sample modal dialog. You can put any content here.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div>
						</div>
					</div>

					<!-- Success Modal -->
					<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
							<div class="modal-content">
								<div class="modal-body text-center py-4">
									<Icon name="circle-check" color="success" size="xl" class="mb-2" />
									<h3>Success!</h3>
									<div class="text-secondary">Your action was completed successfully.</div>
								</div>
								<div class="modal-footer">
									<div class="w-100">
										<div class="row">
											<div class="col">
												<button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
											</div>
											<div class="col">
												<button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Button Groups Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Button Groups</h3>
				</div>
				<div class="card-body">
					<h4>Basic Button Group</h4>
					<div class="btn-group mb-3" role="group">
						<button type="button" class="btn">Left</button>
						<button type="button" class="btn">Middle</button>
						<button type="button" class="btn">Right</button>
					</div>

					<h4>Button Toolbar</h4>
					<div class="btn-toolbar mb-3" role="toolbar">
						<div class="btn-group me-2" role="group">
							<button type="button" class="btn">1</button>
							<button type="button" class="btn">2</button>
							<button type="button" class="btn">3</button>
						</div>
						<div class="btn-group" role="group">
							<button type="button" class="btn">4</button>
							<button type="button" class="btn">5</button>
						</div>
					</div>

					<h4>Vertical Button Group</h4>
					<div class="btn-group-vertical" role="group">
						<button type="button" class="btn">Top</button>
						<button type="button" class="btn">Middle</button>
						<button type="button" class="btn">Bottom</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Segmented Navigation Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Segmented Navigation</h3>
				</div>
				<div class="card-body">
					<h4>Basic Segmented</h4>
					<div class="mb-3">
						<NavSegmented items="Home,Profile,Settings" />
					</div>

					<h4>With Icons</h4>
					<div class="mb-3">
						<NavSegmented icons="home,user,settings" />
					</div>

					<h4>With Emojis</h4>
					<div class="mb-3">
						<NavSegmented items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" />
					</div>

					<h4>With Icons and Text</h4>
					<div class="mb-3">
						<NavSegmented items="Home,Profile,Settings" icons="home,user,settings" />
					</div>
				</div>
			</div>
		</div>

		<!-- Collapse Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Collapse</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h4>Basic Collapse</h4>
							<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
								Toggle Collapse
							</button>
							<div class="collapse" id="collapseExample">
								<div class="card card-body">
									This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<h4>Multiple Targets</h4>
							<div class="btn-list">
								<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
									Toggle First
								</button>
								<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
									Toggle Second
								</button>
							</div>
							<div class="collapse" id="multiCollapseExample1">
								<div class="card card-body mb-2">
									First collapsible content.
								</div>
							</div>
							<div class="collapse" id="multiCollapseExample2">
								<div class="card card-body">
									Second collapsible content.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Tooltips & Popovers Section -->
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Tooltips & Popovers</h3>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<h4>Tooltips</h4>
							<div class="btn-list">
								<button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
									Top
								</button>
								<button class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
									Right
								</button>
								<button class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
									Bottom
								</button>
								<button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
									Left
								</button>
							</div>
						</div>
						<div class="col-md-6">
							<h4>Popovers</h4>
							<div class="btn-list">
								<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
									Top Popover
								</button>
								<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
									Right Popover
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- List Groups Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">List Groups</h3>
				</div>
				<div class="card-body p-0">
					<div class="list-group list-group-flush">
						<div class="list-group-item">
							<Icon name="home" class="me-2" />
							Home
						</div>
						<div class="list-group-item active">
							<Icon name="star" class="me-2" />
							Active item
						</div>
						<div class="list-group-item">
							<Icon name="settings" class="me-2" />
							Settings
						</div>
						<div class="list-group-item">
							<Icon name="user" class="me-2" />
							Profile
						</div>
						<div class="list-group-item disabled">
							<Icon name="lock" class="me-2" />
							Disabled item
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Content Elements Section -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Content Elements</h3>
				</div>
				<div class="card-body">
					<h4>Blockquote</h4>
					<blockquote class="blockquote mb-4">
						<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
						<footer class="blockquote-footer">
							Someone famous in <cite title="Source Title">Source Title</cite>
						</footer>
					</blockquote>

					<h4>Code Block</h4>
					<pre class="mb-3"><code set:html={codeExample}></code></pre>

					<h4>Inline Elements</h4>
					<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>