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

{% block title %}Record {{ workout.name }}{% endblock %}

{% block form %}
{% for exercise in workout.exercises %}
{% set outer_loop = loop %}
<div>
	<h1 id="{{ exercise.name }}" 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 + 1 }}</th>
					<td><input class="input" name="exercises-{{ outer_loop.index0 }}-sets-{{ i }}-lbs" type="number"></td>
					<td><input class="input" name="exercises-{{ outer_loop.index0 }}-sets-{{ i }}-reps" type="number"></td>
					<td>
						<a class="button" onClick="onClickSetCheck(this)">
							<span class="icon is-small">
								<i class="fa fa-check"></i>
							</span>
						</a>
					</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>
	<div class="buttons is-centered">
		<a class="button is-primary" onClick="onClickAddSet(this)">
			<span class="icon is-small">
				<i class="fa fa-plus"></i>
			</span>
			<span>Add Set</span>
		</a>
	</div>
	<hr>
</div>
{% endfor %}

<div class="field is-horizontal is-grouped is-grouped-right">
	<button class="button is-success ">
		<span class="icon is-small">
			<i class="fa fa-check"></i>
		</span>
		<span>Finish Workout</span>
	</button>
</div>

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

{% endblock %}