{% load i18n unfold %}

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

  <div
    class="{% if card_included == 1 %}-m-6{% else %} bg-white flex flex-col grow lg:border lg:border-base-200 lg:overflow-hidden lg:rounded-default lg:shadow-xs{% endif %} lg:dark:border-base-800 dark:bg-base-900"
  >
    <div
      {%
      if
      height
      %}style="max-height: {{ height }}px;"
      data-simplebar{%
      endif
      %}
    >
      <table class="block border-spacing-none border-separate w-full lg:table">
        {% if table.headers %}
        <thead
          class="text-font-important-light dark:text-font-important-dark {% if height %}sticky top-0{% 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 sortable column-description hidden px-3 lg:table-cell dark:border-base-800 dark:bg-white/[.02] {% if card_included == 1 %}first:pl-6 last:pr-6{% endif %}"
            >
              {{ header|capfirst }}
            </th>
            {% endfor %}
          </tr>
        </thead>
        {% endif %} {% if table.rows %}
        <tbody class="block lg:table-row-group">
          {% for row in table.rows %}
          <tr
            class="{% if striped == 1 %}{% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}{% endif %} block group {% if forloop.first %}first-row{% endif %} {% if not card_included == 1 %}border border-base-200 mb-3 rounded-default shadow-xs{% else %}border-b border-base-200 last:border-b-0{% endif %} lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800"
          >
            {% for cell in row %}
            <td
              class="px-3 py-2 align-middle flex border-t border-base-200 font-normal gap-4 min-w-0 overflow-hidden text-left before:flex before:capitalize before:content-[attr(data-label)] before:font-semibold before:text-font-important-light dark:before:text-font-important-dark before:items-center before:mr-auto first:border-t-0 lg:group-[.first-row]:border-t-0 lg:before:hidden {% if not forloop.parentloop.first %}lg:first:border-t{% endif %} lg:py-3 lg:table-cell dark:border-base-800 {% if card_included == 1 %}lg:first:pl-6 lg:last:pr-6{% endif %}"
              {%
              if
              table.headers
              %}data-label="{{ table.headers|index:forloop.counter0 }}"
              {%
              endif
              %}
            >
              {{ cell }}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
        {% endif %}
      </table>
    </div>

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