---
// Port of preview/pages/alerts.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Alert from '@shared/components/Alert.astro';
---

<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts">
	<div class="row row-cards">
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Basic alerts</h2>
					<Alert type="danger" title="An error occurred!" />
					<Alert type="warning" title="Some information is missing!" />
					<Alert type="success" title="Completed successfully!" />
					<Alert type="info" title="Just a quick note!" />
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Alerts with action</h2>
					<Alert showClose action="Link" type="danger" title="An error occurred!" />
					<Alert showClose action="Link" type="warning" title="Some information is missing!" />
					<Alert showClose action="Link" type="success" title="Completed successfully!" />
					<Alert showClose action="Link" type="info" title="Just a quick note!" />
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Dismissible alerts</h2>
					<Alert showClose type="danger" title="An error occurred!" />
					<Alert showClose type="warning" title="Some information is missing!" />
					<Alert showClose type="success" title="Completed successfully!" />
					<Alert showClose type="info" title="Just a quick note!" />
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Alert with a description</h2>
					<Alert
						showClose
						type="danger"
						title="Password does not meet requirements:"
						list="Minimum 8 characters,Include a special character"
					/>
					<Alert
						showClose
						type="warning"
						title="Some information is missing!"
						description="This is a custom alert box with a description."
					/>
					<Alert
						showClose
						type="success"
						title="Completed successfully!"
						description="This is a custom alert box with a description."
					/>
					<Alert
						showClose
						type="info"
						title="Just a quick note!"
						description="This is a custom alert box with a description."
					/>
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Important alerts</h2>
					<Alert
						showClose
						important
						type="danger"
						title="Password does not meet requirements:"
						list="Minimum 8 characters,Include a special character"
					/>
					<Alert showClose important type="success" description="This is a custom alert box with a description." />
					<Alert showClose important type="warning" description="This is a custom alert box with a description." />
					<Alert showClose important type="info" description="This is a custom alert box with a description." />
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<div class="card-body">
					<h2 class="card-title">Minor alerts</h2>
					<Alert
						showClose
						minor
						type="danger"
						title="Password does not meet requirements:"
						list="Minimum 8 characters,Include a special character"
					/>
					<Alert showClose minor type="success" description="This is a custom alert box with a description." />
					<Alert showClose minor type="warning" description="This is a custom alert box with a description." />
					<Alert showClose minor type="info" description="This is a custom alert box with a description." />
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>