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

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

{% block form %}
<div>
	{% for exercise in workout.exercises %}
	{{ form.exercises.entries[loop.index0]['id'] }}
	<h1 class="title is-4 has-text-black">{{ exercise.name }}</h1>
	<div>
		<table class="table is-fullwidth is-hoverable">
			<thead>
				<th>Set</th>
				{% if exercise.type == 'time' %}
				<th>Timer</th>
				{% else %}
				<th>lbs</th>
				<th>Reps</th>
				{% endif %}
				<th>Done</th>
			</thead>
			<tbody>
				{% for set in form.exercises.entries[loop.index0].sets.entries %}
				<tr>
					<th>{{ loop.index }}</th>
					{% if exercise.type == 'time' %}
					<td>
						<div class="timer">
							<a class="button" onClick="onClickPausePlayTimer(this)">
								<span class="icon is-small">
									<i class="fa fa-play"></i>
								</span>
							</a>
							<span class="{{ ['units'] }}">
							</span>
						</div>
					</td>
					{% else %}
					<td>{{ set['lbs'](class_='input') }}</td>
					<td>{{ set['units'](class_='input') }}</td>
					{% endif %}
					<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>

<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 %}