{% load table_block_tags shared_filters %}

<div
  class="
    my-6 prose

    {% if not page.root_page.content_is_full_width %}
      max-w-[100ch]
    {% else %}
      max-w-[100%]
    {% endif %}

    {% if page.root_page.content_is_centered %}
      mx-auto
    {% endif %}
  "
>
  <table
    style="
      {% comment %}TODO{% endcomment %}

      {% if self.alignment == "left" %}
      {% elif alignment == "center" %}
        margin-left: auto;
        margin-right: auto;
      {% elif alignment == "right" %}
        margin-left: auto;
      {% elif alignment == "full" %}
        width: 100%;
      {% endif %}
    "
  >
    {% if table.table_caption %}
      <caption class="head-heavy-sm my-4">{{ table.table_caption }}</caption>
    {% endif %}

    {% if table_header %}
      <thead>
        <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
          {% for column in table_header %}
            {% with forloop.counter0 as col_index %}
              <th scope="col" {% cell_classname 0 col_index %}>
                {% if column.strip %}
                  {{ column.strip|markdown }}
                {% endif %}
              </th>
            {% endwith %}
          {% endfor %}
        </tr>
      </thead>
    {% endif %}

    <tbody
      class="
        w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2
        [&_td]:align-middle [&_tr:nth-child(even)]:bg-grey-50
      "
    >
      {% for row in table.data %}
        {% with forloop.counter0 as row_index %}
          <tr>
            {% for column in row %}
              {% with forloop.counter0 as col_index %}
                {% if table.first_col_is_header and forloop.first %}
                  <th scope="row" {% cell_classname row_index col_index table_header %}>
                    {% if column.strip %}
                      {{ column.strip|markdown }}
                    {% endif %}
                  </th>
                {% else %}
                  <td {% cell_classname row_index col_index table_header %}>
                    {% if column.strip %}
                      {{ column.strip|markdown }}
                    {% endif %}
                  </td>
                {% endif %}
              {% endwith %}
            {% endfor %}
          </tr>
        {% endwith %}
      {% endfor %}
    </tbody>
  </table>
</div>