{% 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>
        <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>

    {% 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 #}
                                {# TODO: Add View/Edit/Assign buttons later #}
                                <span
                                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 items-center">
                                    {# Added items-center #}
                                    ID: {{ program.program_id }}
                                </span>
                                {# 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 sm:flex sm:justify-between">
                            <div class="sm:flex">
                                <p class="flex items-center text-sm text-gray-500">
                                    {{ program.description | default('No description provided.') }}
                                </p>
                            </div>
                            {# <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                                Created: {{ program.created_at | strftime('%Y-%m-%d') }}
                            </div> #}
                        </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 %}