{{template "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: .25rem;
	border-top-right-radius: .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}}