{{ template "sync/layout/authenticated.html" . }}
{{ define "title" }}Layout Test{{ end }}
{{ define "extraheader" }}
	<style>
		.bd-example {
			padding: 1.5rem;
			margin-right: 0;
			margin-left: 0;
			border-width: 1px;
			border-top-left-radius: 0.25rem;
			border-top-right-radius: 0.25rem;
		}
	</style>
{{ end }}
{{ define "content" }}
	<!-- Main Content -->
	<div id="content">
		<div class="container-fluid">
			<div class="row">
				<div class="bd-example">
					<button type="button" class="btn btn-primary">Primary</button>
					<button type="button" class="btn btn-secondary">Secondary</button>
					<button type="button" class="btn btn-success">Success</button>
					<button type="button" class="btn btn-danger">Danger</button>
					<button type="button" class="btn btn-warning">Warning</button>
					<button type="button" class="btn btn-info">Info</button>
					<button type="button" class="btn btn-light">Light</button>
					<button type="button" class="btn btn-dark">Dark</button>

					<button type="button" class="btn btn-link">Link</button>
				</div>

				<div class="col-md-6 mb-4">
					<div class="card">
						<div class="card-body">
							<h5 class="card-title">Card 1</h5>
							<p class="card-text">Some example content for the first card.</p>
						</div>
					</div>
				</div>
				<div class="col-md-6 mb-4">
					<div class="card">
						<div class="card-body">
							<h5 class="card-title">Card 2</h5>
							<p class="card-text">Some example content for the second card.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-primary text-white">Primary</div>
				<div class="p-3 mb-3 bg-primary-100 text-white">Primary-100</div>
				<div class="p-3 mb-3 bg-primary-200 text-white">Primary-200</div>
				<div class="p-3 mb-3 bg-primary-300 text-white">Primary-300</div>
			</div>
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-secondary text-white">Secondary</div>
			</div>
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-success text-white">Success</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-danger text-white">Danger</div>
			</div>
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-warning text-white">Warning</div>
			</div>
			<div class="col-md-4">
				<div class="p-3 mb-3 bg-info text-white">Info</div>
			</div>
		</div>
	</div>
{{ end }}