{% extends 'base/layout.html' %}

{% block content %}

<div class="container">
	<section class="hero is-info welcome is-small">
		<div class="hero-body">
			<div class="container">
				<h1 class="title">
					Hello, {{ current_user.username }}.
				</h1>
				<h2 class="subtitle">
					%subtitle%
				</h2>
			</div>
		</div>
	</section>
	<section class="info-tiles">
		<div class="tile is-ancestor has-text-centered">
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title">%sets%</p>
					<p class="subtitle">Sets Completed</p>
				</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title">%workouts_completed%</p>
					<p class="subtitle">Workouts Completed</p>
				</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title">%workouts%</p>
					<p class="subtitle">Workouts</p>
				</article>
			</div>
			<!-- Something else?
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title">19</p>
					<p class="subtitle">Exceptions</p>
				</article>
			</div> -->
		</div>
	</section>
	<div class="columns">
		<div class="column is-6">
			<div class="card events-card">
				<header class="card-header">
					<p class="card-header-title">
						Recent Workouts
					</p>
				</header>
				<div class="card-table">
					<div class="content">
						<table class="table is-fullwidth is-striped">
							<tbody>
								<tr>
									<td>Push Day</td>
									<td>04/04/22 4:30 PM</td>
									<td class="level-right"><a class="button is-small is-primary" href="#">View</a></td>
								</tr>
								<tr>
									<td>Leg Day</td>
									<td>04/02/22 2:13 PM</td>
									<td class="level-right"><a class="button is-small is-primary" href="#">View</a></td>
								</tr>
								<tr>
									<td>Pull Day</td>
									<td>04/01/22 1:30 PM</td>
									<td class="level-right"><a class="button is-small is-primary" href="#">View</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<footer class="card-footer">
					<a href="#" class="card-footer-item">View All</a>
				</footer>
			</div>
		</div>
		<div class="column is-6">
			<div class="card">
				<header class="card-header">
					<p class="card-header-title">
						Inventory Search
					</p>
					<a href="#" class="card-header-icon" aria-label="more options">
						<span class="icon">
							<i class="fa fa-angle-down" aria-hidden="true"></i>
						</span>
					</a>
				</header>
				<div class="card-content">
					<div class="content">
						<div class="control has-icons-left has-icons-right">
							<input class="input is-large" type="text" placeholder="">
							<span class="icon is-medium is-left">
								<i class="fa fa-search"></i>
							</span>
							<span class="icon is-medium is-right">
								<i class="fa fa-check"></i>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="card">
				<header class="card-header">
					<p class="card-header-title">
						User Search
					</p>
					<a href="#" class="card-header-icon" aria-label="more options">
	  <span class="icon">
		<i class="fa fa-angle-down" aria-hidden="true"></i>
	  </span>
	</a>
				</header>
				<div class="card-content">
					<div class="content">
						<div class="control has-icons-left has-icons-right">
							<input class="input is-large" type="text" placeholder="">
							<span class="icon is-medium is-left">
		  <i class="fa fa-search"></i>
		</span>
							<span class="icon is-medium is-right">
		  <i class="fa fa-check"></i>
		</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}