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