{% load partials powercrud %}

{% if use_crispy %}
    {% load crispy_forms_tags %}
{% endif %}

<style>
    .table-max-height {
        max-height: calc((100vh - {
                        {
                        table_pixel_height_other_page_elements
                    }

                }) * {
                    {
                    table_max_height
                }
            }

            / 100);
    }

    /* Add styles to match header text with table size */
    .table-xl th {
        font-size: 1.25rem;
        /* Matches DaisyUI's table-xl text size */
    }

    .table-lg th {
        font-size: 1.125rem;
        /* Matches DaisyUI's table-lg text size */
    }

    .table-sm th {
        font-size: 0.875rem;
        /* Matches DaisyUI's table-sm text size */
    }

    .table-xs th {
        font-size: 0.75rem;
        /* Matches DaisyUI's table-xs text size */
    }

    /* Add sticky header styles */
    .sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    table[data-inline-enabled="true"] {
        --pc-inline-rest-bg: {% if inline_edit_always_visible %}{{ inline_edit_highlight_palette.rest_bg }}{% else %}transparent{% endif %};
        --pc-inline-rest-border: {% if inline_edit_always_visible %}{{ inline_edit_highlight_palette.rest_border }}{% else %}transparent{% endif %};
        --pc-inline-hover-bg: {{ inline_edit_highlight_palette.hover_bg }};
        --pc-inline-hover-border: {{ inline_edit_highlight_palette.hover_border }};
        --pc-inline-active-row-outline: {{ inline_edit_highlight_palette.active_row_outline }};
        --pc-inline-active-row-bg: {{ inline_edit_highlight_palette.active_row_bg }};
        --pc-inline-active-row-overlay: {{ inline_edit_highlight_palette.active_row_overlay }};
        --pc-inline-active-widget-bg: {{ inline_edit_highlight_palette.active_widget_bg }};
        --pc-inline-active-widget-border: {{ inline_edit_highlight_palette.active_widget_border }};
    }

    .inline-edit-trigger {
        cursor: pointer;
        border-radius: 0.25rem;
        padding: 0.25rem 0.15rem;
        padding-right: calc(0.15rem + var(--pc-inline-icon-buffer, 2.25ch));
        transition: background-color 0.1s ease;
    }

    .inline-edit-trigger.pc-inline-editable {
        background-color: var(--pc-inline-rest-bg);
        box-shadow: inset 0 0 0 1px var(--pc-inline-rest-border);
    }

    td[data-inline-cell="true"] {
        min-width: calc(var(--pc-inline-icon-buffer, 2.25ch) + 2ch);
    }

    .inline-edit-trigger:focus-visible,
    .inline-edit-trigger:hover {
        outline: 2px solid hsl(var(--p));
        outline-offset: 2px;
        background-color: hsl(var(--b2));
    }

    .inline-edit-trigger.pc-inline-editable:focus-visible,
    .inline-edit-trigger.pc-inline-editable:hover {
        background-color: var(--pc-inline-hover-bg);
        box-shadow: inset 0 0 0 1px var(--pc-inline-hover-border);
        outline: 2px solid hsl(var(--p));
        outline-offset: 2px;
    }

    .pc-actions-inline.hidden {
        display: none;
    }

    tr[data-inline-active="true"] {
        position: relative;
        outline: 2px solid var(--pc-inline-active-row-outline);
        outline-offset: -2px;
        background-color: var(--pc-inline-active-row-bg);
        box-shadow: inset 0 0 0 999px var(--pc-inline-active-row-overlay);
    }

    tr[data-inline-active="true"] .inline-field-widget {
        background-color: var(--pc-inline-active-widget-bg);
        border-radius: 0.35rem;
        box-shadow: inset 0 0 0 1px var(--pc-inline-active-widget-border);
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
    }

    tr[data-inline-active="true"] .inline-field-widget input,
    tr[data-inline-active="true"] .inline-field-widget select,
    tr[data-inline-active="true"] .inline-field-widget textarea {
        background-color: transparent;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    tr[data-inline-active="true"] > td {
        overflow: hidden;
        box-sizing: border-box;
    }

    .inline-row-attention {
        animation: inline-row-pulse 0.8s ease;
    }

    @keyframes inline-row-pulse {
        0% {
            box-shadow: 0 0 0 0 hsla(var(--p) / 0.35);
        }
        100% {
            box-shadow: 0 0 0 12px hsla(var(--p) / 0);
        }
    }
</style>

{% with inline_enabled=inline_edit.enabled %}

<div class="overflow-x-auto table-max-height"
    style="overflow-y: auto; width: fit-content; padding-right: 20px;"
    {% if enable_bulk_edit %}data-selection-key="{{ keyBase }}_{{ selection_key_suffix }}_selected"{% endif %}
    >
    <table class="table {{ table_classes }} w-auto" 
        {% if inline_enabled %}data-inline-enabled="true"{% endif %}>
        <thead>
            <tr>
                {% if enable_bulk_edit %}
                <!-- Bulk selection checkbox column -->
                <th class="bg-neutral text-neutral-content text-center align-middle sticky-header w-10">
                    <input type="checkbox" id="select-all-checkbox"
                             class="checkbox checkbox-sm checkbox-neutral border-1 border-white"
                             data-powercrud-select-all="true"
                             data-powercrud-initial-checked="{% if all_selected %}true{% else %}false{% endif %}"
                             data-powercrud-initial-indeterminate="{% if some_selected and not all_selected %}true{% else %}false{% endif %}"
                             {% if all_selected %}checked{% endif %}
                             {% if some_selected and not all_selected %}indeterminate{% endif %}
                             >
                </th>
                {% endif %}
                
                {% for header in headers %}
                <th class="bg-neutral text-neutral-content text-center align-middle truncate table-column-width sticky-header"
                    {% if header.is_sortable %}style="cursor: pointer;"{% endif %}
                    {% if header.is_sortable %}
                        {% if use_htmx %}
                        hx-get="?sort={% if current_sort == header.field_name %}-{% elif current_sort == '-'|add:header.field_name %}{% else %}{% endif %}{{ header.field_name }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}{% if filter_params %}&{{ filter_params }}{% endif %}"
                        hx-headers='{"X-Filter-Sort-Request": "true"}'
                        hx-target="#filtered_results"
                        hx-push-url="true"
                        hx-trigger="click"
                        {% else %}
                        onclick="window.location.href='?sort={% if current_sort == header.field_name %}-{% elif current_sort == '-'|add:header.field_name %}{% else %}{% endif %}{{ header.field_name }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}{% if filter_params %}&{{ filter_params }}{% endif %}'"
                        {% endif %}
                    {% endif %}>
                    <span class="flex h-full items-center justify-center gap-1">
                        <span>{{ header.label }}</span>
                        {% if header.help_text %}
                            <button type="button"
                                    class="inline-flex items-center justify-center text-neutral-content/80 hover:text-neutral-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-content/80"
                                    aria-label="Help for {{ header.label }}"
                                    data-tippy-content="{{ header.help_text }}"
                                    data-powercrud-tooltip="semantic"
                                    onclick="event.stopPropagation();"
                                    title="">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     fill="none"
                                     viewBox="0 0 24 24"
                                     stroke-width="1.5"
                                     stroke="currentColor"
                                     class="w-4 h-4"
                                     aria-hidden="true">
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          d="M11.25 11.25l.041-.02a.75.75 0 0 1 1.09.852l-.708 2.836a.75.75 0 0 0 1.09.852l.041-.02M12 6.75h.008v.008H12V6.75Z" />
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                </svg>
                            </button>
                        {% endif %}
                        {% if header.is_sortable %}
                            {% if current_sort == header.field_name %}
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline-block">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            {% elif current_sort == '-'|add:header.field_name %}
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline-block">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                                </svg>
                            {% endif %}
                        {% endif %}
                    </span>
                </th>
                {% endfor %}
                <th class="bg-neutral text-neutral-content text-center align-middle sticky-header">
                    <span class="text-center block w-full h-full">Actions</span>
                </th>
            </tr>
        </thead>
            <tbody>
                {% for row in object_list %}
                <tr
                    {% if row.row_id %}id="{{ row.row_id }}"{% endif %}
                    class="text-center hover {% if row.is_selected %}bg-base-200{% endif %}"
                    data-inline-row="true"
                    {% if row.inline_blocked_reason %}data-inline-status="{{ row.inline_blocked_reason }}"{% endif %}
                    {% if row.inline_url %}data-inline-row-url="{{ row.inline_url }}"{% endif %}
                >
                    {% if enable_bulk_edit %}
                    <!-- Row selection checkbox -->
        <td class="py-0 align-middle">
            <input type="checkbox"
                   class="checkbox checkbox-sm row-select-checkbox"
                   data-powercrud-row-select="true"
                   data-id="{{ row.id }}"
                   data-powercrud-initial-checked="{% if row.id|stringformat:'s' in selected_ids %}true{% else %}false{% endif %}"
                   autocomplete="off"
                   {% if row.id|stringformat:"s" in selected_ids %}checked{% endif %}
                   hx-post="{{ list_view_url }}toggle-selection/{{ row.id }}/"
                   hx-target="#bulk-actions-container"
                   hx-swap="outerHTML">
        </td>
                    {% endif %}
                    
                    {% for cell in row.cells %}
                        {% with value_str=cell.value|stringformat:"s" %}
                    <td class="{% if forloop.first %}font-medium{% endif %} py-0 align-middle px-2 truncate table-column-width"
                        data-field-name="{{ cell.name }}"
                        {% if cell.is_inline_editable %}data-inline-cell="true"{% endif %}
                        {% if cell.dependency %}
                            data-inline-dependent-field="{{ cell.name }}"
                            {% if cell.dependency.depends_on %}
                                data-inline-depends-on="{{ cell.dependency.depends_on|join:',' }}"
                            {% endif %}
                            data-inline-endpoint="{{ cell.dependency.endpoint_url|default:inline_edit.dependency_endpoint_url }}"
                        {% endif %}
                    >
        {% if inline_enabled and row.inline_allowed and cell.is_inline_editable %}
            {% with align_class=cell.align %}
            <button type="button"
                    class="inline-edit-trigger pc-inline-editable w-full px-0 {% if align_class == 'center' %}flex justify-center text-center{% else %}text-left{% endif %}"
                    data-inline-field="{{ cell.name }}"
                    {% if value_str|slice:":1" != "<" %}data-tippy-content="{{ cell.value }}" data-powercrud-tooltip="overflow"{% endif %}
                    {% if row.inline_url %}
                        hx-get="{{ row.inline_url }}"
                        hx-target="#{{ row.row_id }}"
                        hx-swap="outerHTML"
                    {% endif %}
                    hx-trigger="click, keyup[key=='Enter'], keyup[key==' ']"
                    >
                <span class="inline-flex whitespace-nowrap {% if align_class == 'center' %}items-center justify-center{% else %}w-full{% endif %}">
                    {{ cell.value }}
                </span>
            </button>
            {% endwith %}
        {% else %}
            <div class="{% if cell.align == 'center' %}flex justify-center items-center w-full{% else %}w-full text-left{% endif %}"
                 {% if value_str|slice:":1" != "<" %}data-tippy-content="{{ cell.value }}" data-powercrud-tooltip="overflow"{% endif %}>
                {{ cell.value }}
            </div>
        {% endif %}
                    </td>
                        {% endwith %}
                    {% endfor %}
    <td class="text-right py-1 align-middle" data-inline-actions="true">
        <div class="pc-actions-default">
            {{ row.actions }}
        </div>
    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
</div>

{% if enable_bulk_edit %}
<!-- No selection restore JS here; handled globally in object_list.html -->
{% endif %}
{% endwith %}

{% partialdef inline_row_display %}
{% with inline_enabled=inline_config.enabled %}
<tr
    {% if row.row_id %}id="{{ row.row_id }}"{% endif %}
    class="text-center hover"
    data-inline-row="true"
    {% if row.inline_blocked_reason %}data-inline-status="{{ row.inline_blocked_reason }}"{% endif %}
    {% if row.inline_url %}data-inline-row-url="{{ row.inline_url }}"{% endif %}
>
    {% if enable_bulk_edit %}
    <td class="py-0 align-middle">
        <input type="checkbox"
               class="checkbox checkbox-sm row-select-checkbox"
               data-powercrud-row-select="true"
               data-id="{{ row.id }}"
               {% if row.id|stringformat:"s" in selected_ids %}checked{% endif %}
               hx-post="{{ list_view_url }}toggle-selection/{{ row.id }}/"
               hx-target="#bulk-actions-container"
               hx-swap="outerHTML">
    </td>
    {% endif %}
    {% for cell in row.cells %}
        {% with value_str=cell.value|stringformat:"s" %}
    <td class="py-0 align-middle px-2 truncate table-column-width"
        style="text-align:{% if cell.align == 'center' %}center{% else %}left{% endif %};"
        data-field-name="{{ cell.name }}"
        {% if cell.is_inline_editable %}data-inline-cell="true"{% endif %}
        >
        {% if inline_enabled and row.inline_allowed and cell.is_inline_editable %}
            {% with align_class=cell.align %}
            <button type="button"
                    class="inline-edit-trigger pc-inline-editable w-full px-0 {% if align_class == 'center' %}flex justify-center text-center{% else %}text-left{% endif %}"
                    data-inline-field="{{ cell.name }}"
                    {% if value_str|slice:":1" != "<" %}data-tippy-content="{{ cell.value }}" data-powercrud-tooltip="overflow"{% endif %}
                    {% if row.inline_url %}
                        hx-get="{{ row.inline_url }}"
                        hx-target="#{{ row.row_id }}"
                        hx-swap="outerHTML"
                    {% endif %}
                    hx-trigger="click, keyup[key=='Enter'], keyup[key==' ']"
                    >
                <span class="inline-flex whitespace-nowrap {% if align_class == 'center' %}items-center justify-center{% else %}w-full{% endif %}">
                    {{ cell.value }}
                </span>
            </button>
            {% endwith %}
        {% else %}
            <div class="{% if cell.align == 'center' %}flex justify-center items-center w-full{% else %}w-full text-left{% endif %}"
                 {% if value_str|slice:":1" != "<" %}data-tippy-content="{{ cell.value }}" data-powercrud-tooltip="overflow"{% endif %}>
                {{ cell.value }}
            </div>
        {% endif %}
    </td>
        {% endwith %}
    {% endfor %}
    <td class="text-right py-1 align-middle" data-inline-actions="true">
        <div class="pc-actions-default {% if row.inline_blocked_reason %}opacity-50 pointer-events-none{% endif %}"
             {% if row.inline_blocked_label %}data-tippy-content="{{ row.inline_blocked_label }}" data-powercrud-tooltip="semantic"{% endif %}>
            {{ row.actions }}
        </div>
    </td>
</tr>
{% endwith %}
{% endpartialdef inline_row_display %}

{% partialdef inline_row_form %}
<tr
    {% if row.row_id %}id="{{ row.row_id }}"{% endif %}
    class="text-center bg-base-200"
    data-inline-row="true"
    data-inline-active="true"
    {% if inline_cancel_url or row.inline_url %}
        data-inline-row-url="{{ inline_cancel_url|default:row.inline_url }}"
    {% endif %}
>
    {% if enable_bulk_edit %}
    <td class="py-0 align-middle">
        <input type="checkbox"
               class="checkbox checkbox-sm row-select-checkbox"
               data-id="{{ row.id }}"
               disabled>
    </td>
    {% endif %}
    {% for cell in row.cells %}
    <td class="py-0 align-middle px-2 truncate table-column-width" data-field-name="{{ cell.name }}">
        {% if cell.is_inline_editable and form %}
            {% with inline_field=form|get_form_field:cell.name %}
            {% if inline_field %}
                <label class="sr-only" for="{{ inline_field.id_for_label }}">{{ inline_field.label|default:cell.name|title }}</label>
                <div
                    class="inline-field-widget w-full"
                    data-inline-field="{{ cell.name }}"
                    {% if cell.dependency %}
                        data-inline-dependent="true"
                        {% if cell.dependency.depends_on %}
                            data-inline-depends-on="{{ cell.dependency.depends_on|join:',' }}"
                        {% endif %}
                        data-inline-endpoint="{{ cell.dependency.endpoint_url|default:inline_config.dependency_endpoint_url }}"
                    {% endif %}
                >
                    {{ inline_field }}
                </div>
                {% if inline_field.errors %}
                <div class="text-error text-xs mt-1">
                    {{ inline_field.errors|join:", " }}
                </div>
                {% endif %}
            {% else %}
                {{ cell.value }}
            {% endif %}
            {% endwith %}
        {% else %}
            <div class="text-sm text-base-content/70 truncate text-left">{{ cell.value }}</div>
        {% endif %}
    </td>
    {% endfor %}
    <td class="text-right py-1 align-middle">
        <input type="hidden" name="pk" value="{{ row.id }}">
        {% csrf_token %}
        {% for hidden_field in inline_hidden_fields %}
            {{ hidden_field.as_hidden }}
        {% endfor %}
        {% if form.non_field_errors %}
        <div class="alert alert-error shadow-sm mb-2 py-1 px-2 text-left text-sm">
            {{ form.non_field_errors|join:", " }}
        </div>
        {% endif %}
        <div class="flex flex-wrap sm:flex-nowrap items-center justify-end gap-2 text-left sm:text-right">
            <button type="button"
                    class="btn {{ action_button_classes }} btn-primary"
                    data-inline-save
                    hx-post="{{ inline_save_url|default:row.inline_url }}"
                    hx-target="#{{ row.row_id }}"
                    hx-swap="outerHTML"
                    hx-include="#{{ row.row_id }} [name]">
                Save
            </button>
            <button type="button"
                    class="btn btn-sm btn-ghost"
                    data-inline-cancel
                    hx-get="{{ inline_cancel_url|default:row.inline_url }}"
                    hx-target="#{{ row.row_id }}"
                    hx-swap="outerHTML"
                    hx-vals='{"inline_display": true}'
                    hx-trigger="click, keyup[key=='Escape'] from:closest tr"
                    >
                Cancel
            </button>
        </div>
    </td>
</tr>
{% endpartialdef inline_row_form %}