{% load sekizai_tags %}
{% load static %}

{% addtoblock "css" %}
  <link rel="stylesheet" href="{% static "sortabletable/css/main.css" %}">
{% endaddtoblock %}

{% addtoblock "js" %}
  <script src="{% static "sortabletable/js/main.js" %}"></script>
{% endaddtoblock %}

<div class="sortable-table__container">
  <table class="sortable-table" id="sortable-table-{{ table_id }}" data-settings="{{ settings }}">
    <thead>
      <tr>
        {% for col in header %}
          <th {{ col.attrs }}>{{ col.name }}</th>
        {% endfor %}
      </tr>
    </thead>
    {% if footer %}
    <tfoot>
      {% for footer_row in footer %}
      <tr>
        {% for cell in footer_row %}
          <td{% if cell.is_number %} class="numbers"{% endif %}>{{ cell.text }}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tfoot>
    {% endif %}
    <tbody>
      {% for row in rows %}
      <tr>
        {% for cell in row %}
          <td{% if cell.is_number %} data-sort="{{ cell.value }}" class="numbers"{% endif %}>
            {{ cell.text }}
          </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>