{# Table row variant for displaying a Task in a list #}
<tr x-data="{ editing: false }" id="task-{{ id }}">
    {# Title column #}
    <td class="px-6 py-4 whitespace-nowrap">
        <div x-show="!editing" class="text-sm font-medium text-gray-900">{{ title }}</div>
        <input x-show="editing"
               type="text"
               name="title"
               value="{{ title }}"
               form="edit-form-{{ id }}"
               style="display: none;"
               class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
    </td>

    {# Description column #}
    <td class="px-6 py-4">
        <div x-show="!editing" class="text-sm text-gray-700">{{ description or 'No description' }}</div>
        <textarea x-show="editing"
                  name="description"
                  form="edit-form-{{ id }}"
                  rows="2"
                  style="display: none;"
                  class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">{{ description }}</textarea>
    </td>

    {# Status - Always editable via dropdown #}
    <td class="px-6 py-4 whitespace-nowrap">
        <select name="status_value"
                {% if not editing %}
                hx-patch="/api/tasks/{{ id }}"
                hx-target="#task-{{ id }}"
                hx-swap="outerHTML"
                hx-headers='{"Qk-Variant": "table"}'
                {% else %}
                form="edit-form-{{ id }}"
                {% endif %}
                class="px-2 py-1 text-xs font-semibold rounded-full border-0 focus:outline-none focus:ring-2 focus:ring-blue-500
                    {% if status.value == 'done' %}
                        bg-green-100 text-green-800
                    {% elif status.value == 'in_progress' %}
                        bg-yellow-100 text-yellow-800
                    {% else %}
                        bg-gray-100 text-gray-800
                    {% endif %}">
            <option value="todo" {% if status.value == 'todo' %}selected{% endif %}>Todo</option>
            <option value="in_progress" {% if status.value == 'in_progress' %}selected{% endif %}>In Progress</option>
            <option value="done" {% if status.value == 'done' %}selected{% endif %}>Done</option>
        </select>
    </td>

    {# Actions #}
    <td class="px-6 py-4 whitespace-nowrap text-sm">
        <div class="flex space-x-2">
            {# View mode actions #}
            <div x-show="!editing" class="flex space-x-2">
                <button @click="editing = true"
                        class="text-blue-600 hover:text-blue-800">
                    Edit
                </button>
                <button hx-delete="/api/tasks/{{ id }}"
                        hx-confirm="Are you sure you want to delete this task?"
                        hx-target="#task-{{ id }}"
                        hx-swap="outerHTML"
                        class="text-red-600 hover:text-red-800">
                    Delete
                </button>
            </div>

            {# Edit mode actions #}
            <div x-show="editing" class="flex space-x-2" style="display: none;">
                <form id="edit-form-{{ id }}"
                      hx-patch="/api/tasks/{{ id }}"
                      hx-target="#task-{{ id }}"
                      hx-swap="outerHTML"
                      hx-headers='{"Qk-Variant": "table"}'
                      hx-on::after-request="editing = false">
                    <button type="submit"
                            class="text-green-600 hover:text-green-800">
                        Save
                    </button>
                </form>
                <button @click="editing = false"
                        class="text-gray-600 hover:text-gray-800">
                    Cancel
                </button>
            </div>
        </div>
    </td>
</tr>