{#
/**
 * @file
 * CivicTheme Table component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - caption: [string] Table caption.
 * - caption_position: [string] Caption position (before, after).
 * - header: [array] Header cells.
 *   Each item contains:
 *   - items [string]
 * - rows: [array] Table rows.
 *   Each item contains:
 *   - items [array]
 * - footer: [array] Footer cells.
 *   Each item contains:
 *   - items [string]
 * - is_striped: [boolean] Whether to show table with striped rows.
 * - is_data_table: [boolean] Whether to show as a data table.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set striped_class = is_striped ? 'ct-table--%s'|format('striped') : '' %}
{% set data_table_class = is_data_table ? 'ct-table--%s'|format('data') : '' %}
{% set caption_position_class = caption_position == 'after' ? 'ct-table--caption-after' : 'ct-table--caption-before' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s %s'|format(theme_class, caption_position_class, striped_class, data_table_class, modifier_class|default('')) %}

{% if rows is not empty or header is not empty or footer is not empty or caption is not empty %}
  <table class="ct-table {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    {% if caption %}
      <caption>{{ caption }}</caption>
    {% endif %}

    {% if header is not empty %}
      <thead>
      <tr>
        {% for item in header %}
          <th scope="col">{{ item }}</th>
        {% endfor %}
      </tr>
      </thead>
    {% endif %}

    {% if rows is not empty %}
      <tbody>
      {% for row in rows %}
        <tr>
          {% for col in row %}
            <td {% if header is not empty and header[loop.index0] %}data-title="{{ header[loop.index0] }}"{% endif %}>
              {{ col|raw }}
            </td>
          {% endfor %}
        </tr>
      {% endfor %}
      </tbody>
    {% endif %}

    {% if footer is not empty %}
      <tfoot>
      <tr>
        {% for item in footer %}
          <th scope="col">{{ item }}</th>
        {% endfor %}
      </tr>
      </tfoot>
    {% endif %}
  </table>
{% endif %}
