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

{% block content %}

<div class="container">
	<div class="columns">
			<div class="column is-3 ">
				<aside class="menu is-hidden-mobile">
					<p class="menu-label">
						General
					</p>
					<ul class="menu-list">
						<li><a class="is-active">Dashboard</a></li>
					</ul>
					<p class="menu-label">
						Workouts
					</p>
					<ul class="menu-list">
						<li><a>Add a Workout</a></li>
						<li>
							<a>Manage Your Workouts</a>
							<ul>
								<!-- TODO: list workouts -->
								<li><a>Pull Day</a></li>
								<li><a>Push Day</a></li>
								<li><a>Leg Day</a></li>
							</ul>
						</li>
					</ul>
					<!--
					<p class="menu-label">
						Transactions
					</p>
					<ul class="menu-list">
						<li><a>Payments</a></li>
						<li><a>Transfers</a></li>
						<li><a>Balance</a></li>
						<li><a>Reports</a></li>
					</ul>
					-->
				</aside>
			</div>
			<div class="column is-9">
				<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>
		</div>
</div>

{% endblock %}