<form class="w-full" id="new-set-workout-{{ workout_id }}"
    hx-post="{{ url_for('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 htmx:afterRequest
                    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" id="new-set-workout-{{ workout_id }}">
        <div class="w-full md:w-1/3 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>
            <div class="relative">

                <div class="w-full">
                    <select name="exercise_id"
                        class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                        hx-get="{{ url_for('get_most_recent_topset_for_exercise', person_id=person_id, workout_id=workout_id) }}"
                        hx-target="#new-set-workout-{{ workout_id }}" hx-swap="outerHTML" _="init js(me)
                            tail.select(me, {
                                search: true,
                                placeholder: 'Filter exercises',
                            })
                        end">
                        {% for e in exercises %}
                        <option value="{{ e.exercise_id }}" {% if e.exercise_id==exercise_id %}selected{% endif %}>{{
                            e.name
                            }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div class="w-full md:w-1/3 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 has_value==True %} placeholder="{{ repetitions }}"
                _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
        </div>

        <div class="w-full md:w-1/3 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 has_value==True %} placeholder="{{ weight }}"
                _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
        </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 px-0 sm:px-2">
        <button
            class="py-2 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"
            type="submit">
            Add top set
        </button>

        <button hx-confirm="Are you sure you wish to delete this workout?"
            hx-delete="{{ url_for('delete_workout', person_id=person_id, workout_id=workout_id) }}"
            _='on click trigger closeModal'
            class="py-2 px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:scale-[1.02] transition-transform">Delete
            workout</button>
    </div>
</form>

{% if has_value==True %}
<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="#exercise-progress-{{ person_id }}" hx-swap="innerHTML">
</div>
{% endif %}