{% load i18n unfold %}

<div class="flex flex-col {% if class %}{{ class }}{% endif %}">
    {% if title %}
        <h3 class="font-semibold mb-1 text-important text-sm">
            {{ title }}
        </h3>
    {% endif %}

    <div class="{% if card_included == 1 %}{% if card_size == "md" %}-m-3{% else %}-m-6{% endif %}{% else %} bg-white border border-base-200 flex flex-col grow overflow-hidden rounded-default shadow-xs{% endif %} dark:border-base-800 dark:bg-base-900">
        <div {% if height %}style="max-height: {{ height }}px;"{% endif %} class="overflow-x-auto scrollbar-default">
            <table class="border-spacing-none border-separate w-full {% if table_class %}{{ table_class }}{% endif %}">
                {% if table.headers %}
                    <thead class="text-important {% if height %}sticky top-0 z-50{% endif %}">
                        <tr class="bg-base-50 dark:bg-base-900">
                            {% for header in table.headers %}
                                <th class="align-middle border-b border-base-200 font-semibold py-2 text-left whitespace-nowrap px-3 dark:border-base-800 dark:bg-white/[.02] {% if card_included == 1 %}{% if card_size == "md" %}first:pl-3 last:pr-3{% else %}first:pl-6 last:pr-6{% endif %}{% endif %} {% if header|is_dict and header.class %}{{ header.class }}{% endif %}">
                                    {% if header|is_dict %}
                                        {{ header.content }}
                                    {% else %}
                                        {{ header|capfirst }}
                                    {% endif %}
                                </th>
                            {% endfor %}
                        </tr>
                    </thead>
                {% endif %}

                {% if table.rows %}
                    {% for row in table.rows %}
                        <tbody class="relative" {% if row.attrs %}{% include "unfold/helpers/attrs.html" with attrs=row.attrs %} {% endif %} {% if row.table.collapsible %}x-data="{ rowOpen: false }"{% endif %}>
                            <tr class="data-row {% if striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} group {% if forloop.first %}first-row{% endif %} {% if not card_included == 1 %}border border-base-200 rounded-default{% else %}border-b border-base-200 {% if forloop.last %}last:border-b-0{% endif %}{% endif %} dark:border-base-800 relative">
                                {% for cell in row.cols|default:row %}
                                    <td class="px-3 py-1.5 h-[45px] align-middle border-t border-base-200 font-normal min-w-0 overflow-hidden text-left group-[.first-row]:border-t-0 dark:border-base-800 {% if card_included == 1 %}{% if card_size == "md" %}first:pl-3 last:pr-3{% else %}first:pl-6 last:pr-6{% endif %}{% endif %} {% if cell|is_dict and cell.class %}{{ cell.class }}{% endif %}">
                                        {% if row.table.rows|length > 0 %}
                                            <div class="flex items-center gap-2">
                                                {% if forloop.first and row.table.rows|length > 0 and row.table.collapsible %}
                                                    <div class="material-symbols-outlined align-middle cursor-pointer text-important select-none h-[18px] w-[18px] -rotate-90 transition-all" x-on:click="rowOpen = !rowOpen" x-bind:class="{'rotate-0': rowOpen}">
                                                        expand_more
                                                    </div>
                                                {% endif %}

                                                <div class="align-middle">
                                                    {% if cell|is_dict %}
                                                        {{ cell.content}}
                                                    {% else %}
                                                        {{ cell }}
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% else %}
                                            {% if cell|is_dict %}
                                                {{ cell.content }}
                                            {% else %}
                                                {{ cell }}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>

                            {% if "table" in row %}
                                <tr {% if row.table.collapsible %}x-show="rowOpen"{% endif %}>
                                    <td colspan="100">
                                        {% if row.table.collapsible %}
                                            <div class="absolute bg-primary-600 -bottom-px left-0 top-0 w-0.5 z-[50]" x-show="rowOpen"></div>
                                        {% endif %}

                                        <table class="w-full">
                                            {% if row.table.headers %}
                                                <thead>
                                                    <tr class="bg-base-50 dark:bg-white/[.02]">
                                                        {% for header in row.table.headers %}
                                                            <th class="align-middle border-b border-t border-base-200 font-semibold py-2 text-important text-left whitespace-nowrap sortable column-description px-3 dark:border-base-800 dark:bg-white/[.02] {% if card_included == 1 %}{% if card_size == "md" %}first:pl-3 last:pr-3{% else %}first:pl-6 last:pr-6{% endif %}{% endif %} {% if header|is_dict and header.class %}{{ header.class }}{% endif %}">
                                                                {% if header|is_dict %}
                                                                    {{ header.content }}
                                                                {% else %}
                                                                    {{ header }}
                                                                {% endif %}
                                                            </th>
                                                        {% endfor %}
                                                    </tr>
                                                </thead>
                                            {% endif %}

                                            <tbody>
                                                {% for nested_row in row.table.rows %}
                                                    <tr class="data-row {% if row.table.striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} group {% if forloop.first %}first-row{% endif %} rounded-default dark:border-base-800 relative">
                                                        {% for cell in nested_row %}
                                                            <td class="px-3 py-1.5 h-[45px] align-middle border-t border-base-200 font-normal min-w-0 overflow-hidden text-left group-[.first-row]:border-t-0 dark:border-base-800 {% if card_included == 1 %}{% if card_size == "md" %}first:pl-3 last:pr-3{% else %}first:pl-6 last:pr-6{% endif %}{% endif %} {% if cell|is_dict and cell.class %}{{ cell.class }}{% endif %}">
                                                                {% if cell|is_dict %}
                                                                    {{ cell.content }}
                                                                {% else %}
                                                                    {{ cell }}
                                                                {% endif %}
                                                            </td>
                                                        {% endfor %}
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            {% endif %}
                        </tbody>
                    {% endfor %}
                {% endif %}
            </table>
        </div>

        {% if not table.rows %}
            <p class="bg-white flex grow items-center justify-center py-2 rounded-default dark:bg-base-900">
                {% trans "No data" %}
            </p>
        {% endif %}
    </div>
</div>