---
// Port of preview/pages/badges.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/Icon.astro';
import DropdownMenu from '@shared/components/ui/DropdownMenu.astro';
import site from '@data/site.json';

// Liquid: colors = ['default'] + site.colors keys + ['dark', 'light']
const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'];
const sizes = ['sm', 'md', 'lg'];

// Liquid uc_first filter
const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1);
---

<DefaultLayout title="Badges" pageHeader="Badges" pageMenu="base.badges">
	<div class="row row-cards">
		<div class="col-4">
			<div class="row row-cards">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h1>Example heading <span class="badge">New</span></h1>
							<h2>Example heading <span class="badge">New</span></h2>
							<h3>Example heading <span class="badge">New</span></h3>
							<h4>Example heading <span class="badge">New</span></h4>
							<h5>Example heading <span class="badge">New</span></h5>
							<h6>Example heading <span class="badge">New</span></h6>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Badge sizes</h3>

							<div class="space-y">
								{
									sizes.map((size) => (
										<div class="badges-list">
											<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
											<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
												<Icon name="check" /> Left icon
											</span>
											<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
												Right icon<Icon name="arrow-right" />
											</span>
											<span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
												<Icon name="star" type="filled" />
											</span>
										</div>
									))
								}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Positioned badges</h3>

							<div class="btn-list">
								<button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>

								<button type="button" class="btn">
									Inbox
									<span class="badge bg-red badge-notification text-red-fg">
										9+
										<span class="visually-hidden">unread messages</span>
									</span>
								</button>

								<button type="button" class="btn">
									Profile
									<span class="badge badge-dot bg-red badge-notification"></span>
								</button>

								<button type="button" class="btn">
									Settings
									<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
								</button>

								<button type="button" class="btn btn-icon">
									<Icon name="bell" />
									<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
								</button>

								<button type="button" class="btn btn-icon btn-action">
									<Icon name="bell" />
									<span class="badge badge-dot bg-red badge-notification"></span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-8">
			<div class="row row-cards">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Basic badges</h3>
							<div class="badges-list">
								{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Light badges</h3>
							<div class="badges-list">
								{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Outline badges</h3>
							<div class="badges-list">
								{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<h3 class="card-title">Badges with icons</h3>
							<div class="badges-list">
								{
									colors.map((color) => (
										<span class={`badge bg-${color} text-${color}-fg`}>
											{' '}
											<Icon name="star" type="filled" /> {ucFirst(color)}{' '}
										</span>
									))
								}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-lg-3"><DropdownMenu show badge arrow /></div>
		<div class="col-sm-6 col-lg-9">
			<div class="row row-cards">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="btn-list">
								{
									colors.map((color, index) => (
										<button class="btn">
											{ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg ms-2`}>{index + 1}</span>
										</button>
									))
								}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="btn-list">
								{
									colors.map((color, index) => (
										<button class="btn position-relative">
											{ucFirst(color)} badge{' '}
											<span class={`badge bg-${color} text-${color}-fg badge-notification badge-pill`}>{index + 1}</span>
										</button>
									))
								}
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="btn-list">
								{
									colors.map((color) => (
										<button class="btn position-relative">
											{ucFirst(color)} badge <span class={`badge bg-${color} badge-notification badge-blink`} />
										</button>
									))
								}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>