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

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

{% addtoblock "js" %}
  <script src="{% static "sortabletable/js/vendor/tablesort/tablesort.min.js" %}"></script>
  <script src="{% static "sortabletable/js/vendor/tablesort/src/sorts/tablesort.numeric.js" %}"></script>
  <script src="{% static "sortabletable/js/vendor/chroma-js/chroma.min.js" %}"></script>
  <script src="{% static "sortabletable/js/main.js" %}"></script>
  <script>
    sortableTable(document.getElementById('sortable-table-{{ table_id }}'), {{ settings|safe }});
  </script>
{% endaddtoblock %}

<div class="sortable-table__container">
  <table class="sortable-table" id="sortable-table-{{ table_id }}">
    <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>
  {% if object.source %}
  <small class="sortable-table__source">
    {{ object.source|markdown }}
  </small>
  {% endif %}
</div>