{% 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"> Welcome to your home.
				</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 has-text-black">{{ current_user.workouts.count() }}</p>
					<p class="subtitle has-text-black">Workouts</p> </article> </div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title has-text-black">{{ records|length }}</p>
					<p class="subtitle has-text-black">Workouts Completed</p>
				</article>
			</div>
			<div class="tile is-parent">
				<article class="tile is-child box">
					<p class="title has-text-black">{{ sets_completed }}</p>
					<p class="subtitle has-text-black">Sets Completed</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">
					My Workouts
					</p>
				</header>
				<div class="card-table">
					<div class="content">
						<table class="table is-fullwidth is-striped">
							<tbody>
								{% for workout in current_user.workouts %}
								<tr>
									<td>{{ workout.name }}</td>
									<td>{{ workout.exercises.count() }} exercises</td>
									<td class="level-right">
										<p class="buttons">
										<a class="button is-small is-primary" href="/workout/record/{{ workout.id }}">Record</a>
										<a class="button is-small is-info" href="/workout/edit/{{ workout.id }}">Edit</a>
										<a class="button is-small is-danger js-modal-trigger" data-target="modal-{{ workout.id }}" href="#">Delete</a>
										</p>
									</td>
								</tr>
								<!-- Confirmation Modal -->
								<div class="modal" id="modal-{{ workout.id }}">
									<div class="modal-background"></div>
									<div class="modal-card">
										<section class="modal-card-body">
											<h1 class="title has-text-black">Are you sure?</h1>
											<p>
											Are you sure you want to delete this workout?
											You will not be able to restore it once you do.
											</p>
										</section>
										<footer class="modal-card-foot">
											<a href="/api/workout/delete?id={{ workout.id }}" class="button is-danger">Confirm</a>
											<button class="button">Cancel</button>
										</footer>
									</div>
								</div>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
				<footer class="card-footer">
					<a href="/workout/create" class="card-footer-item">Create New</a>
				</footer>
			</div>
		</div>
		<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>
								{% for record in records[:10] %}
								<tr>
									<td>{{ record.workout.name }}</td>
									<td>{{ record.finished_nice() }}</td>
									<td class="level-right"><a class="button is-small is-primary" href="/workout/history/{{ record.id }}">View</a></td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
				<footer class="card-footer">
					<p class='card-footer-item'>{{ records|length }} Recent Workouts</p>
				</footer>
			</div>
		</div>
	</div>
	<div class="columns">
		{% for completed_workout in top3 %}
		<div class="column is-4">
			<div class="box">
				<canvas id="chart-{{ loop.index }}">
			</div>
		</div>
		{% endfor %}
	</div>
</div>

<script type="text/javascript" src="/static/js/chart.js"></script>
<script>
	{% for completed_workout in top3 %}
	exercise_chart('chart-{{ loop.index }}', {{ top3[loop.index0].id }}, "{{ top3[loop.index0].name }}");
	{% endfor %}
</script>
{% endblock %}