{% extends "base.html" %}

{% block title %}{{ exercise.name }} Progress -- SneakySwole{% endblock %}

{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
{% endblock %}

{% block content %}
<hgroup>
    <h1>{{ exercise.name }}</h1>
    <p>{{ exercise.muscle_group }} | {{ exercise.workout_day }} Day</p>
</hgroup>

<!-- Progression Suggestion -->
{% if suggestion %}
<article>
    <header><h3>Next Workout Suggestion</h3></header>
    <p>{{ suggestion.message }}</p>
    <div class="grid">
        <div>
            <small>Suggested Reps</small>
            <p style="font-size:1.5rem; font-weight:700;">
                {{ suggestion.suggested_reps }}
            </p>
        </div>
        <div>
            <small>Suggested Weight</small>
            <p style="font-size:1.5rem; font-weight:700;">
                {{ suggestion.suggested_weight }}
            </p>
        </div>
        <div>
            <small>Progression Type</small>
            <p><mark>{{ suggestion.progression_type }}</mark></p>
        </div>
    </div>
</article>
{% endif %}

<!-- Progress Chart -->
<article>
    <header><h3>Rep and Weight Trends</h3></header>
    {% include "partials/progress_chart.html" %}
</article>

<a href="/dashboard" role="button" class="outline">Back to Dashboard</a>
{% endblock %}