<div class="overflow-auto w-full" data-simplebar>
    <table class="w-full">
        <thead>
            <tr>
                <th></th>

                {% for header in data.headers %}
                    <th class="font-normal px-3 pb-2.5 text-left ">
                        <div class="font-semibold text-font-important-light truncate dark:text-font-important-dark">
                            {{ header.title }}
                        </div>

                        {% if header.subtitle %}
                            <div class="mt-0.5 text-xs truncate">
                                {{ header.subtitle }}
                            </div>
                        {% endif %}
                    </th>
                {% endfor %}
            </tr>
        </thead>

        <tbody>
            {% for row in data.rows %}
                <tr class="h-full">
                    <td>
                        <div class="pr-3 py-2.5">
                            <div class="font-semibold text-font-important-light dark:text-font-important-dark">
                                {{ row.header.title }}
                            </div>

                            {% if row.header.subtitle %}
                                <div class="mt-0.5 text-xs">
                                    {{ row.header.subtitle }}
                                </div>
                            {% endif %}
                        </div>
                    </td>

                    {% for col in row.cols %}
                        <td class="h-full">
                            <div class="flex flex-col h-[66px] justify-center px-3 py-2.5 rounded {% if col.color %}{{ col.color }}{% else %}bg-base-50 border border-dashed dark:bg-base-800 dark:border-base-700{% endif %}">
                                <span>
                                    {{ col.value }}
                                </span>

                                {% if col.subtitle %}
                                    <span class="mt-0.5">
                                        {{ col.subtitle }}
                                    </span>
                                {% endif %}
                            </div>
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
