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

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

{% block form %}
{% for exercise in form.exercises.entries %}
<div>
	{{ exercise['id'] }}
	<h1 class="title is-4 has-text-black">{{ workout.exercises[loop.index0].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 set in exercise.sets.entries %}
				<tr>
					<th>{{ loop.index }}</th>
					<td>{{ set['lbs'](class_='input') }}</td>
					<td>{{ set['units'](class_='input') }}</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 %}