{% extends 'base.html' %}

{% block title %}Tasks - QuikUI Example{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow">
    {# Create Task Form #}
    <div class="p-6 border-b border-gray-200">
        <h2 class="text-lg font-semibold mb-4">Create New Task</h2>

        {# Demo note for error handling - errors will replace this entire box #}
        <div class="quikui-error-container mb-4 p-3 rounded text-sm bg-blue-50 border border-blue-200 text-blue-800">
            <strong>Try the error handling:</strong>
            <ul class="list-disc list-inside mt-1">
                <li>Leave title empty to see a standard validation error</li>
                <li>Enter "error" as title to see a custom templated error</li>
                <li>Enter a description > 64 characters to see a Pydantic validation error</li>
                <li>Try to delete an "In Progress" task to see a toast notification</li>
            </ul>
        </div>

        <form hx-post="/api/tasks"
              hx-target="#tasks-tbody"
              hx-swap="afterbegin"
              hx-on::after-request="if(event.detail.successful && event.detail.xhr.status >= 200 && event.detail.xhr.status < 300) { this.reset(); const container = this.closest('.p-6').querySelector('.quikui-error-container'); if (container) { container.outerHTML = '<div class=&quot;quikui-error-container mb-4 p-3 rounded text-sm bg-blue-50 border border-blue-200 text-blue-800&quot;><strong>Try the error handling:</strong><ul class=&quot;list-disc list-inside mt-1&quot;><li>Leave title empty to see a standard validation error</li><li>Enter &quot;error&quot; as title to see a custom templated error</li><li>Enter a description &gt; 64 characters to see a Pydantic validation error</li><li>Try to delete an &quot;In Progress&quot; task to see a toast notification</li></ul></div>'; } }"
              hx-headers='{"Qk-Variant": "table"}'
              class="space-y-4">

            <div>
                <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                    Title
                </label>
                <input type="text"
                       id="title"
                       name="title"
                       required
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                    Description
                </label>
                <textarea id="description"
                          name="description"
                          rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            <div>
                <label for="status_value" class="block text-sm font-medium text-gray-700 mb-1">
                    Status
                </label>
                <select id="status_value"
                        name="status_value"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    {% for status in statuses %}
                    <option value="{{ status.value }}">{{ status.value.replace('_', ' ').title() }}</option>
                    {% endfor %}
                </select>
            </div>

            <button type="submit"
                    class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                Create Task
            </button>
        </form>
    </div>

    {# Task List #}
    <div class="p-6">
        <h2 class="text-lg font-semibold mb-4">Tasks</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Title
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Description
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody id="tasks-tbody" class="bg-white divide-y divide-gray-200">
                    {% if tasks %}
                        {{ tasks|variant("table") }}
                    {% else %}
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-gray-500">
                                No tasks yet. Create one above!
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}