cardio/templates/workouts_list.html

<div class="block p-6 bg-white border border-b-0 border-gray-200 rounded-lg rounded-b-none shadow">
    <div class="flex flex-row justify-between">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ u.name }}</h5>
        <div hx-delete="{{ url_for('delete_user', user_id=user.id) }}"
            hx-confirm="Are you sure you wish to delete your account {{ u.name }}?" hx-target="#users-container"
            class="cursor-pointer pr-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke:currentColor;">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0">
                </path>
            </svg>

        </div>
    </div>
    <div class="text-sm text-gray-700 mb-4 max-w-full overflow-hidden">{{ user.duration_sparkline }}</div>
    <div class="flex flex-col md:flex-row">
        <div class="w-full">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                Bike
            </label>
            <div class="relative">
                <select
                    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"
                    id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id"
                    required hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
                    {% for b in bikes %}
                    <option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
                    </option>
                    {% endfor %}
                </select>
                <script>
                    te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue("{{ user.bike_id | safe }}");
                </script>
            </div>
        </div>
        <button
            class="shadow mt-6 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full ml-0 md:ml-4"
            type="submit" onclick="location.href = '{{ url_for('new_workout', user_id=u.id) }}';">New Workout</button>
    </div>
</div>

<div
    class="border border-t-0  border-neutral-200 border-b-lg bg-white dark:border-neutral-600 dark:bg-neutral-800 mb-8">
    {% if u.workouts_count > 0 %}

    <h2 class="mb-0">
        <button
            class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
            type="button">
            <div>
                <h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>

            </div>
            <span
                class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="h-6 w-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </span>
        </button>
    </h2>
    <div class="!visible collapse p-4 hidden">
        {{ render_partial('partials/calendar.html', foo=1) }}


        <ol class="relative border-l border-gray-200 dark:border-gray-700">
            {% for w in workouts[:5] %}
            <li class="mb-10 ml-6">
                <span
                    class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
                    <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"
                        data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;">
                        <path
                            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z">
                        </path>
                    </svg>
                </span>

                <div
                    class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
                    <div class="items-center justify-between sm:flex">
                        <time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{{ w.start_time_ago
                            }}</time>
                        <div class="text-sm font-normal text-gray-500 lex dark:text-gray-300"
                            _="on click toggle .hidden on #workout_view_wrapper-{{ w.id }}">Duration: {{ w.duration }}
                            |
                            Average RPM: {{ w.average_rpm
                            }} |
                            Calories: {{ w.calories }} | Distance: {{ w.distance }} {% if w.is_heart_rate_available
                            %} | Average: BPM: {{w.average_bpm }} {% endif %}<span
                                class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">{{
                                w.bike_display_name }}</span> </div>
                    </div>
                    <div class="p-3 text-xs italic font-normal text-gray-500 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300 mt-3 hidden"
                        id="workout_view_wrapper-{{ w.id }}">
                        <div id="workout_view-{{ w.id }}">
                            {% with workout=w, graph_types=w['selected_graph_types'] %}
                            {% include 'workout_view.html' %}
                            {% endwith %}
                        </div>
                        <button
                            class="mx-4 mb-4 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
                            hx-delete="{{ url_for('delete_workout', user_id=w.user_id, workout_id=w.id) }}"
                            hx-confirm="Are you sure you wish to delete this {{ w.duration }} workout at {{ w.start_time }}"
                            hx-target="#container">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                            </svg>

                            <span>Delete</span>
                        </button>
                    </div>
                </div>


            </li>
            {% endfor%}

        </ol>

        <div class="flex justify-center">
            <button type="button"
                class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                </svg>
            </button>
        </div>

    </div>
    {% endif %}
</div>