{% extends "base.html" %}
{% block title %}List{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
{% endblock %}

{% block content %}
<div class="container">
  <h1>{{ title }}</h1>
  <table class="table table-hover">
      {% for item in items %}
      {% if loop.index == 1 and item.data_headers is defined %}
      <thead style="position: sticky; top: 0; background-color: white">
      <tr>
          <th scope="col">#</th>
          {% for h in item.data_headers %}
          <th>{{ h }}</th>
          {% endfor %}
          {% if item.actions is defined %}
          <th></th>
          {% endif %}
          {% if item.admin_actions is defined and current_user.role == 'admin' %}
          <th></th>
          {% endif %}
      </tr>
      </thead>
      <tbody>
      {% endif %}
      <tr>
          <th scope="row">{{ loop.index }}</th>
          {% if item.data_columns is defined %}
          {% for c in item.data_columns %}
          <td>{{ c }}</td>
          {% endfor %}
          {% else %}
          <td>{{ item }}</td>
          {% endif %}
          {% if item.actions is defined %}
          <td>
              {% for action in item.actions %}
              <a href="{{ action[0] }}">
              <i class="{{ action[1] }}"></i>
              </a>
              {% endfor %}
          </td>
          {% endif %}
          {% if item.admin_actions is defined and current_user.role == 'admin' %}
          <td>
              {% for action in item.admin_actions %}
              <a href="{{ action[0] }}">
              <i class="{{ action[1] }}"></i>
              </a>
              {% endfor %}
          </td>
          {% endif %}
      </tr>
      {% if loop.last and item.data_headers is defined %}
      </tbody>
      {% endif %}
      {% endfor %}
  </table>
</div>
{% endblock %}