{% extends "layouts/base.html" %}

{% block title %} UI Cards {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

	<main class="content">
		<div class="container-fluid p-0">

			<h1 class="h3 mb-3">General</h1>

			<div class="row">
				<div class="col-12 col-lg-6">
					<div class="accordion" id="accordionExample">
						<div class="card">
							<div class="card-header" id="headingOne">
								<h5 class="card-title my-2">
									<a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
										Accordion
									</a>
								</h5>
							</div>
							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
									Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
									et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
									craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header" id="headingTwo">
								<h5 class="card-title my-2">
									<a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
										Another one
									</a>
								</h5>
							</div>
							<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
									Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
									et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
									craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header" id="headingThree">
								<h5 class="card-title my-2">
									<a href="#" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseOne">
										Something else
									</a>
								</h5>
							</div>
							<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
								<div class="card-body">
									Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
									Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch
									et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
									craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Breadcrumbs</h5>
							<h6 class="card-subtitle text-muted">Indicate the current page’s location within a navigational hierarchy.</h6>
						</div>
						<div class="card-body">
							<nav aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item active">Home</li>
								</ol>
							</nav>
							<nav aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
									<li class="breadcrumb-item active">Library</li>
								</ol>
							</nav>
							<nav aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="index.html">Home</a></li>
									<li class="breadcrumb-item"><a href="#">Library</a></li>
									<li class="breadcrumb-item active">Data</li>
								</ol>
							</nav>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Images</h5>
							<h6 class="card-subtitle text-muted">Lightweight styles for images.</h6>
						</div>
						<div class="card-body">
							<div class="text-center">
								<img class="rounded mr-2 mb-2" src="/static/assets/img/avatars/avatar.jpg" alt="Placeholder" width="140" height="140">
								<img class="rounded-circle rounded mr-2 mb-2" src="/static/assets/img/avatars/avatar.jpg" alt="Placeholder" width="140" height="140">
								<img class="img-thumbnail rounded mr-2 mb-2" src="/static/assets/img/avatars/avatar.jpg" alt="Placeholder" width="140" height="140">
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Popovers</h5>
							<h6 class="card-subtitle text-muted">Examples for adding Bootstrap popovers.</h6>
						</div>
						<div class="card-body text-center">
							<button class="btn btn-secondary" type="button" title="Popover on top" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.">Popover on top</button>
							<button class="btn btn-secondary" type="button" title="Popover on bottom" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.">Popover on bottom</button>
							<button class="btn btn-secondary" type="button" title="Popover on left" data-container="body" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.">Popover on left</button>
							<button class="btn btn-secondary" type="button" title="Popover on right" data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.">Popover on right</button>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Tooltips</h5>
							<h6 class="card-subtitle text-muted">Examples for adding custom Bootstrap tooltips.</h6>
						</div>
						<div class="card-body text-center">
							<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
							<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
							<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
							<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" data-container="body" title="Tooltip on right">Tooltip on right</button>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-6">
					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Badges</h5>
							<h6 class="card-subtitle text-muted">Examples for badges.</h6>
						</div>
						<div class="card-body">

							<div class="mb-1">
								<span class="badge bg-primary">Primary</span>
								<span class="badge bg-secondary">Secondary</span>
								<span class="badge bg-success">Success</span>
								<span class="badge bg-danger">Danger</span>
								<span class="badge bg-warning">Warning</span>
								<span class="badge bg-info">Info</span>
							</div>

							<div class="mt-1">
								<span class="badge bg-primary rounded-pill">Primary</span>
								<span class="badge bg-secondary rounded-pill">Secondary</span>
								<span class="badge bg-success rounded-pill">Success</span>
								<span class="badge bg-danger rounded-pill">Danger</span>
								<span class="badge bg-warning rounded-pill">Warning</span>
								<span class="badge bg-info rounded-pill">Info</span>
							</div>

						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Dropdowns</h5>
							<h6 class="card-subtitle text-muted">Toggle contextual overlays for displaying lists of links.</h6>
						</div>
						<div class="card-body pb-0">

							<div class="row mb-3">
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Basic:</p>
									<div class="dropdown-menu mb-2" style="position:static;display:block;">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
									</div>
								</div>
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Active:</p>
									<div class="dropdown-menu mb-2" style="position:static;display:block;">
										<a class="dropdown-item" href="#">Regular link</a>
										<a class="dropdown-item active" href="#">Active link</a>
										<a class="dropdown-item" href="#">Another link</a>
									</div>
								</div>
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Disabled:</p>
									<div class="dropdown-menu mb-2" style="position:static;display:block;">
										<a class="dropdown-item" href="#">Regular link</a>
										<a class="dropdown-item disabled" href="#">Disabled link</a>
										<a class="dropdown-item" href="#">Another link</a>
									</div>
								</div>
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Header:</p>
									<div class="dropdown-menu mb-2" style="position:static;display:block;">
										<h6 class="dropdown-header">Dropdown header</h6>
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
									</div>
								</div>
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Dividers:</p>
									<div class="dropdown-menu mb-2" style="position:static;display:block;">
										<a class="dropdown-item" href="#">Action</a>
										<a class="dropdown-item" href="#">Another action</a>
										<a class="dropdown-item" href="#">Something else here</a>
										<div class="dropdown-divider"></div>
										<a class="dropdown-item" href="#">Separated link</a>
									</div>
								</div>
								<div class="col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4">
									<p class="mb-0">Text:</p>
									<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;position:static;display:block;">
										<p class="mb-0">
											Some example text that's free-flowing within the dropdown menu.
										</p>
									</div>
								</div>
							</div>
							<!-- /.row -->

						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Pagination</h5>
							<h6 class="card-subtitle text-muted">Examples for showing pagination.</h6>
						</div>
						<div class="card-body">
							<nav aria-label="Page navigation example">
								<ul class="pagination pagination-sm">
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
									<li class="page-item"><a class="page-link" href="#">1</a></li>
									<li class="page-item active"><a class="page-link" href="#">2</a></li>
									<li class="page-item"><a class="page-link" href="#">3</a></li>
									<li class="page-item"><a class="page-link" href="#">4</a></li>
									<li class="page-item"><a class="page-link" href="#">5</a></li>
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
								</ul>
							</nav>
							<nav aria-label="Page navigation example">
								<ul class="pagination pagination-md">
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
									<li class="page-item"><a class="page-link" href="#">1</a></li>
									<li class="page-item active"><a class="page-link" href="#">2</a></li>
									<li class="page-item"><a class="page-link" href="#">3</a></li>
									<li class="page-item"><a class="page-link" href="#">4</a></li>
									<li class="page-item"><a class="page-link" href="#">5</a></li>
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
								</ul>
							</nav>
							<nav aria-label="Page navigation example">
								<ul class="pagination pagination-lg">
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i></a></li>
									<li class="page-item"><a class="page-link" href="#">1</a></li>
									<li class="page-item active"><a class="page-link" href="#">2</a></li>
									<li class="page-item"><a class="page-link" href="#">3</a></li>
									<li class="page-item"><a class="page-link" href="#">4</a></li>
									<li class="page-item"><a class="page-link" href="#">5</a></li>
									<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-right"></i></a></li>
								</ul>
							</nav>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Progress Bars</h5>
							<h6 class="card-subtitle text-muted">Examples for using Bootstrap custom progress bars.</h6>
						</div>
						<div class="card-body">
							<div class="progress mb-3">
								<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Default</div>
							</div>

							<div class="progress mb-3">
								<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">Striped</div>
							</div>

							<div class="progress mb-3">
								<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Animated</div>
							</div>

							<div class="progress">
								<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Stacked</div>
								<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">15%</div>
								<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
								<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header">
							<h5 class="card-title">Spinners</h5>
							<h6 class="card-subtitle text-muted">Indicate the loading state of a component with Bootstrap spinners.</h6>
						</div>
						<div class="card-body">

							<div class="mb-2">
								<div class="spinner-border text-dark mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-primary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-secondary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-success mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-danger mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-warning mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border text-info mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>

							<div class="mb-2">
								<div class="spinner-border spinner-border-sm text-dark mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-primary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-secondary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-success mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-danger mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-warning mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-border spinner-border-sm text-info mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>

							<hr />

							<div class="mb-2">
								<div class="spinner-grow text-dark mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-primary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-secondary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-success mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-danger mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-warning mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow text-info mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>

							<div class="mb-2">
								<div class="spinner-grow spinner-grow-sm text-dark mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-primary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-secondary mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-success mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-danger mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-warning mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
								<div class="spinner-grow spinner-grow-sm text-info mr-2" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>
	</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}