<form class="w-full" id="new-set-workout-{{ workout_id }}"
    hx-post="{{ url_for('workout.create_topset', person_id=person_id, workout_id=workout_id) }}" hx-swap="beforeend"
    hx-target="#new-workout" _="on htmx:afterOnLoad if #no-workouts add .hidden to #no-workouts end
                    on topsetAdded
                    render #notification-template with (message: 'Topset added') then append it to #notifications-container
                    then call _hyperscript.processNode(#notifications-container)
                    then reset() me
                    then trigger clearNewSetInputs">

    <div class="flex flex-wrap -mx-3 mb-2">
        <div class="w-full md:w-[30%] px-2 md:px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                Exercise
            </label>
            {{ render_partial('partials/exercise/exercise_select.html', person_id=person_id,
            exercise_id=exercise_id, exercise_name=exercise_name) }}
        </div>

        <div class="w-full md:w-[30%] px-2 md:px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                Reps
            </label>
            <input
                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                id="grid-city" type="number" name="repetitions" {% if repetitions %} placeholder="{{ repetitions }}"
                _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
        </div>

        <div class="w-full md:w-[30%] px-2 md:px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
                Weight
            </label>
            <input
                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                id="grid-zip" type="number" name="weight" step="any" {% if weight %} placeholder="{{ weight }}"
                _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
        </div>

        <div class="w-full md:w-[10%] px-2 md:px-3 mb-6 md:mb-0">
            <button
                class="flex items-center justify-center py-2 px-2 md:px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-cyan-600 hover:bg-cyan-700 rounded-lg border border-gray-300 hover:scale-[1.02] transition-transform mb-6 md:mb-0 mt-0 md:mt-6 w-full"
                type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-7 h-7">
                    <path d="M12 4a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0v-6H5a1 1 0 110-2h6V5a1 1 0 011-1z" />
                </svg>
            </button>
        </div>


    </div>

</form>

<div hx-trigger="exerciseSelected from:body"
    hx-get="{{ url_for('workout.get_most_recent_topset_for_exercise', person_id=person_id, workout_id=workout_id) }}"
    hx-target="#new-set-workout-{{ workout_id }}" hx-include="[name='exercise_id']">
</div>

{% if exercise_id %}
<div class="flex items-center justify-center">
    <div class="md:w-full max-w-screen-sm">
        <div class="hidden"
            hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=exercise_id) }}"
            hx-trigger="load" hx-target="this" hx-swap="outerHTML">
        </div>
    </div>
</div>
{% endif %}