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

{% block content %}
<div class="container">
	<div class="columns is-centered">
		<div class="column">
			<h1 class="title is-2">Record {{ workout.name }}</h1>
			<div class="box">
				{% for exercise in workout.exercises %}
					<h1 class="title is-4 has-text-black">{{ exercise.name }}</h1>
					<table class="table is-fullwidth is-hoverable">
						<thead>
							<th>Set</th>
							<th>lbs</th>
							<th>Reps</th>
							<th>Done</th>
						</thead>
						<tbody>
							{% for i in range(exercise.sets) %}
								<tr>
									<th>{{ i }}</th>
									<td><input class="input" type="number"></td>
									<td><input class="input" type="number"></td>
									<td>
										<button class="button" onClick="onClickSetCheck(this)">
											<span class="icon is-small">
												<i class="fa fa-check"></i>
											</span>
										</button>
									</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
					<div class="buttons is-centered">
						<button class="button is-primary">
							<span class="icon is-small">
								<i class="fa fa-plus"></i>
							</span>
							<span>Add Set</span>
						</button>
						<button class="button is-danger">Skip</button>
					</div>
					<hr>
				{% endfor %}
			</div>
		</div>
	</div>
</div>

<script async type="text/javascript" src="/static/js/record.js"></script>

{% endblock %}