<%- include('../layout/_top.ejs') %>
	<%- include('_bottom-navbar') %>
		<div class="container">

			<div class="row">
				<section class="col-sm-6 col-sm-offset-2 top-margined">
					<h2>Stepper</h2>
					<div class="wsq content">
						<%- include('stepper/_two-h-steps') %>
							<%- include('stepper/_three-h-steps') %>
								<%- include('stepper/_four-h-steps') %>
									<%- include('stepper/_confirmation-h-steps') %>
					</div>
					<div class="content">
						<%- include('stepper/_three-h-steps-gray-bg-lightest') %>
					</div>
				</section>
			</div>

			<div class="row">

				<section class="col-sm-6 col-sm-offset-2 top-margined">

					<h2>Small map</h2>
					<div class="wsq content" style="width:400px">
						<%- include('_small-map') %>
					</div>

				</section>

			</div>

			<div class="row">

				<section class="col-sm-6 col-sm-offset-2 top-margined">
					<h2>Official label</h2>

					<div class="wsq content">
						<%- include('_official') %>

							<%- include('_official-big') %>
					</div>

				</section>

			</div>

			<div class="row">

				<section class="col-sm-6 col-sm-offset-2 top-margined">
					<h2>Golden icon</h2>

					<div class="wsq content icon-hoverable">
						<p><i class="golden-icon"></i> with icon-hoverable</p>
					</div>

					<div class="wsq content">
						<p><i class="golden-icon"></i> without</p>
					</div>

				</section>

			</div>

			<%- include('_dropdown.ejs') %>

				<div class="row">
					<section class="col-sm-6 col-sm-offset-2 top-margined">

						<h2>Calendar</h2>

						<div class="wsq content">
							<%- include('_calendar') %>
						</div>
					</section>
				</div>

				<div class="row">
					<section class="col-sm-6 col-sm-offset-2 top-margined">

						<h2>Popover</h2>

						<div class="wsq content">
							<%- include('_tooltip-icon') %>

								<div style="position: relative">
									<i class="fa fa-question-circle" aria-hidden="true" style="font-size: 1.3em; color: #1d77ce;"></i>
									<div style="height:120px;">
										<div role="tooltip" class="popover right" style="display:block;top:-20px;left:20px;">
											<div class="arrow"></div>
											<div class="popover-content">
												And here's some <strong>amazing</strong>
												content. It's very engaging. right?
											</div>
										</div>
									</div>
								</div>
						</div>
					</section>
				</div>

				<div class="row margin-v-lg">
					<section class="col-sm-6 col-sm-offset-2">
						<h2>Draggable list items</h2>
						<div class="content">
							<%- include('_draggable-list') %>
						</div>
					</section>
				</div>

        <div class="row margin-v-lg">
					<section class="col-sm-6 col-sm-offset-2">
            <h2>Accordion</h2>
						<div class="wsq content">
						  <%- include('_accordion') %>
            </div>
					</section>
				</div>

				<div class="row">
					<section class="col-sm-6 col-sm-offset-2 top-margined">
						<div class="wsq content">
							<h2>Info blocks</h2>
							<div class="info-block margin-bottom-sm">Info block</div>
							<div class="info-block-sm margin-bottom-sm">Small info block</div>
							<div class="info-block-sm margin-bottom-sm warning">Warning small info block</div>
							<div class="info-block-sm danger margin-bottom-sm">Error small info block</div>
							<div class="info-block-sm success">Success small info block</div>
						</div>
					</section>
				</div>

				<div class="row">
					<section class="col-sm-6 col-sm-offset-2 top-margined">

						<h2>Bo-list-item (bo comme back-office :+1:)</h2>

						<div class="wsq content">
							<div class="bo-list-item media">
								<div class="media-left">
									<a href="#">
										<img class="media-object ill avatar"
											src="https://cdn.openagenda.com/main/review_martinefreymann67-gmail-com_00.jpg" alt="...">
									</a>
								</div>
								<div class="media-body">
									<div class="title media-heading">
										<a href="#"><strong>Rendez-vous aux jardins de trapelune</strong></a>
										<%- include('_official') %>
									</div>
									<div class="actions">
										<a href="#" class="text-muted">Retirer des sources</a>
									</div>
								</div>
							</div>

							<div class="bo-list-item media">
								<div class="media-left">
									<a href="#">
										<img class="media-object ill avatar"
											src="https://cdn.openagenda.com/main/review_martinefreymann67-gmail-com_00.jpg" alt="...">
									</a>
								</div>
								<div class="media-body">
									<div class="title media-heading">
										<a href="#"><strong>Rendez-vous aux jardins de trapelune</strong></a>
									</div>
									<div class="actions">
										<a href="#" class="text-muted">Retirer des sources</a>
										<a href="#" class="text-muted">Faire caca</a>
									</div>
								</div>
							</div>

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

		</div>
		<%- include('../layout/_bottom.ejs') %>
