{#
/**
 * @file
 * Theme override for views table.
 */
#}
{%
  set classes = [
    'w-full',
    'responsive-enabled' in attributes.class ? 'responsive-table' : '',
  ]
%}
{% if title %}
  <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">{{ title }}</h3>
{% endif %}
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-slate-700">
  <table{{ attributes.addClass(classes) }}>
    {% if header %}
      <thead class="bg-gray-50 dark:bg-slate-800">
        <tr>
          {% for key, column in header %}
            <th{{ column.attributes.addClass('px-4 py-3 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider') }} scope="col">
              {%- if column.wrapper_element -%}
                <{{ column.wrapper_element }}>
                  {%- if column.url -%}
                    <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow" class="hover:text-blue-600 dark:hover:text-blue-400">{{ column.content }}{{ column.sort_indicator }}</a>
                  {%- else -%}
                    {{ column.content }}{{ column.sort_indicator }}
                  {%- endif -%}
                </{{ column.wrapper_element }}>
              {%- else -%}
                {%- if column.url -%}
                  <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow" class="hover:text-blue-600 dark:hover:text-blue-400">{{ column.content }}{{ column.sort_indicator }}</a>
                {%- else -%}
                  {{ column.content }}{{ column.sort_indicator }}
                {%- endif -%}
              {%- endif -%}
            </th>
          {% endfor %}
        </tr>
      </thead>
    {% endif %}
    <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 key, column in row.columns %}
            <td{{ column.attributes.addClass('px-4 py-3 text-sm text-gray-700 dark:text-gray-300') }}>
              {{ column.content }}
            </td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
