{% for p in people %}
<li>
    <a hx-get="{{ url_for('calendar.get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true"
        hx-target="#container"
        class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer page-link"
        _="on click add .hidden to #sidebar then remove .ml-64 from #main
           on htmx:afterRequest go to the top of the body">
        <svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
            fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">
            </path>
        </svg>
        <span class="ml-3 flex-1 whitespace-nowrap">{{ p['Name']}}</span>
        <span
            class="bg-gray-200 text-gray-800 ml-3 text-sm font-medium inline-flex items-center justify-center px-2 rounded-full">{{
            p['NumberOfWorkouts'] }}</span>
    </a>
</li>
{% endfor %}