109 lines
6.5 KiB
HTML
109 lines
6.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Workout Programs{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold">Workout Programs</h1>
|
|
<div class="flex space-x-2">
|
|
<a href="{{ url_for('programs.import_program') }}"
|
|
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
hx-get="{{ url_for('programs.import_program') }}" hx-target="#container" hx-push-url="true">
|
|
Import from JSON
|
|
</a>
|
|
<a href="{{ url_for('programs.create_program') }}"
|
|
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Create New Program
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="mb-4">
|
|
{% for category, message in messages %}
|
|
<div class="p-4 rounded-md {{ 'bg-green-100 border-green-400 text-green-700' if category == 'success' else 'bg-red-100 border-red-400 text-red-700' }}"
|
|
role="alert">
|
|
<p class="font-bold">{{ category.title() }}</p>
|
|
<p>{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
|
<ul role="list" class="divide-y divide-gray-200">
|
|
{% if programs %}
|
|
{% for program in programs %}
|
|
<li id="program-{{ program.program_id }}">
|
|
{# Use HTMX for dynamic loading #}
|
|
<a href="{{ url_for('programs.view_program', program_id=program.program_id) }}"
|
|
class="block hover:bg-gray-50"
|
|
hx-get="{{ url_for('programs.view_program', program_id=program.program_id) }}"
|
|
hx-target="#container" hx-push-url="true" hx-swap="innerHTML">
|
|
<div class="px-4 py-4 sm:px-6">
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm font-medium text-indigo-600 truncate">{{ program.name }}</p>
|
|
<div class="ml-2 flex-shrink-0 flex space-x-2"> {# Added space-x-2 #}
|
|
{# Edit Button #}
|
|
<a href="{{ url_for('programs.edit_program', program_id=program.program_id) }}"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
hx-get="{{ url_for('programs.edit_program', program_id=program.program_id) }}"
|
|
hx-target="#container" hx-push-url="true" hx-swap="innerHTML">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
|
|
fill="currentColor">
|
|
<path
|
|
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
</a>
|
|
{# Delete Button #}
|
|
<button type="button" class="text-red-600 hover:text-red-800 focus:outline-none"
|
|
hx-delete="{{ url_for('programs.delete_program', program_id=program.program_id) }}"
|
|
hx-target="closest li" hx-swap="outerHTML"
|
|
hx-confirm="Are you sure you want to delete the program '{{ program.name }}'? This cannot be undone.">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
|
|
fill="currentColor">
|
|
<path fill-rule="evenodd"
|
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-sm text-gray-500">
|
|
<p class="mb-3">{{ program.description | default('No description provided.') }}</p>
|
|
|
|
{% if program.sessions %}
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
{% for session in program.sessions %}
|
|
<div
|
|
class="bg-gray-50 border border-gray-200 rounded p-2 text-xs min-w-[120px] max-w-[180px]">
|
|
<p class="font-bold text-gray-700 mb-1">
|
|
Day {{ session.session_order }}{% if session.session_name %}: {{
|
|
session.session_name }}{% endif %}
|
|
</p>
|
|
<ul class="list-disc list-inside text-gray-600 space-y-0.5">
|
|
{% for exercise in session.exercises %}
|
|
<li class="truncate" title="{{ exercise.name }}">{{ exercise.name }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li class="px-4 py-4 sm:px-6">
|
|
<p class="text-sm text-gray-500">No workout programs found. Create one!</p>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |