{#
/**
 * @file
 * Theme override for a table.
 */
#}
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-slate-700">
  <table{{ attributes.addClass('w-full') }}>
    {% if caption %}
      <caption class="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">{{ caption }}</caption>
    {% endif %}

    {% for colgroup in colgroups %}
      {% if colgroup.cols %}
        <colgroup{{ colgroup.attributes }}>
          {% for col in colgroup.cols %}
            <col{{ col.attributes }} />
          {% endfor %}
        </colgroup>
      {% else %}
        <colgroup{{ colgroup.attributes }} />
      {% endif %}
    {% endfor %}

    {% if header %}
      <thead class="bg-gray-50 dark:bg-slate-800">
        <tr>
          {% for cell in header %}
            <{{ cell.tag }}{{ cell.attributes.addClass('px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider') }}>
              {{ cell.content }}
            </{{ cell.tag }}>
          {% endfor %}
        </tr>
      </thead>
    {% endif %}

    {% if rows %}
      <tbody class="divide-y divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-900">
        {% for row in rows %}
          <tr{{ row.attributes.addClass('hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors') }}>
            {% for cell in row.cells %}
              <{{ cell.tag }}{{ cell.attributes.addClass('px-4 py-3 text-sm text-gray-700 dark:text-gray-300') }}>
                {{ cell.content }}
              </{{ cell.tag }}>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    {% elseif empty %}
      <tbody>
        <tr>
          <td colspan="{{ header|length }}" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">{{ empty }}</td>
        </tr>
      </tbody>
    {% endif %}

    {% if footer %}
      <tfoot class="bg-gray-50 dark:bg-slate-800">
        {% for row in footer %}
          <tr{{ row.attributes }}>
            {% for cell in row.cells %}
              <{{ cell.tag }}{{ cell.attributes.addClass('px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300') }}>
                {{ cell.content }}
              </{{ cell.tag }}>
            {% endfor %}
          </tr>
        {% endfor %}
      </tfoot>
    {% endif %}
  </table>
</div>
