{% extends "base.html" %}

{% block head %}
        <script src="{{ url_for('static', filename='js/workout.js') }}"></script>
{% endblock %}

{% block title %}Workout on {{ date }}{% endblock %}

{% block content_title %}Workout&nbsp;{% if routine %}<a href="{{ url_for('routine_view', name=routine.name) }}">{{ routine.name }}</a>&nbsp;{% endif %}on&nbsp;<span style="white-space: nowrap;">{{ date }}</span>{% endblock %}

{% block content %}
<div class="container mx-2">
    <form action="{{ url_for('workout_view', workout_id=workout_id) }}" method="post">
        {% for exercise, sets in workout %}
        <div class="field">
            <label class="label"><a href="{{ url_for('exercise_view', name=exercise) }}" tabindex="-1">{{ exercise }}</a></label>
            {% set exercise_loop = loop %}
            {% for (reps, time, weight, rpe), (prev_reps, prev_time, prev_weight, prev_rpe) in sets %}
            {% set input_name = "set" ~ exercise_loop.index ~ "." ~ loop.index %}
            <div class="field has-addons">
                <div class="control has-icons-right has-text-right">
                    <input class="input has-text-right" type="number" name="{{ input_name }}" value="{{ reps | int("") }}" placeholder="{{ prev_reps | int("") }}" min=0 max=999 step="1" size="2" />
                    <span class="icon is-small is-right">
                        &#10005;
                    </span>
                </div>
                <div class="control has-icons-right has-text-right">
                    <input class="input has-text-right" type="number" name="{{ input_name }}" value="{{ time | int("") }}" placeholder="{{ prev_time | int("") }}" min=0 max=999 step="1" size="2" />
                    <span class="icon is-small is-right">
                        s
                    </span>
                </div>
                <div class="control has-icons-right has-text-right">
                    <input class="input has-text-right" type="number" name="{{ input_name }}" value="{{ weight | float | replace("nan", "") }}" placeholder="{{ prev_weight | float | replace("nan", "") }}" min=0 max=999 step="0.1" size="3" />
                    <span class="icon is-small is-right">
                        kg
                    </span>
                </div>
                <div class="control has-icons-left has-text-right">
                    <span class="icon is-small is-left">
                        @
                    </span>
                    <input class="input has-text-right" type="number" name="{{ input_name }}" value="{{ rpe | float | replace("nan", "") }}" placeholder="{{ prev_rpe | float | replace("nan", "") }}" min=0 max=10 step="0.5" size="2" />
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
        <div class="field">
            <label class="label">Notes</label>
            <textarea class="textarea" name="notes">{{ notes }}</textarea>
        </div>
        <div class="navbar is-fixed-bottom is-transparent">
            <div class="container is-flex-direction-column">
                <div class="columns is-mobile px-4">
                    <div class="column">
                        <button class="button is-info has-background-grey" id="modal-open" type="button">
                            <span>&#9201;</span>
                        </button>
                    </div>
                    <div class="column has-text-right">
                        <button class="button is-success">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="modal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="box mx-2">
            <div class="block">
                <label class="subtitle">Stopwatch</label>
                <div class="container has-text-centered p-5">
                    <p id="stopwatch-time" class="title is-size-1"></p>
                    <button id="stopwatch-play" class="button mt-1 mx-3" type="button"></button>
                    <button id="stopwatch-reset" class="button mt-1 mx-3" type="button"></button>
                </div>
            </div>
            <div class="block">
                <label class="subtitle">Metronome</label>
                <div class="container p-5">
                    <div class="field is-grouped is-grouped-centered">
                        <div class="field mx-4">
                            <label class="label">Interval</label>
                            <div class="select">
                                <select id="metronome-interval">
                                    {% for i in range(1, 61) %}
                                    <option>{{ i }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="field mx-4">
                            <label class="label">Stress</label>
                            <div class="control">
                                <div class="select">
                                    <select id="metronome-stress">
                                        {% for i in range(1, 13) %}
                                        <option>{{ i }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="field has-text-centered mx-4">
                            <label class="label">&nbsp;</label>
                            <div class="control">
                                <button id="metronome-play" class="button" type="button"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block">
                <label class="subtitle">Timer</label>
                <div class="container has-text-centered p-5">
                    <p><input id="timer-time" class="title is-size-1 has-text-centered" type="number" min="0" max="9999" step="1" size="4"></input></p>
                    <button id="timer-play" class="button mt-5 mx-3" type="button"></button>
                    <button id="timer-reset" class="button mt-5 mx-3" type="button"></button>
                </div>
            </div>
        </div>
    </div>
    <button id="modal-close" class="modal-close is-large" aria-label="close"></button>
</div>
{% endblock %}

{% set parent_page = 'workouts_view' %}
