{% extends base|none("admin/base.jinja") %}

{% block content %}
<div class="ui container">
  <h1>List of {{ item_info.name }}</h1>

  {% block navigation_bar %}
  <div class="ui container">
    <button hx-get="{{ item_model.add_url }}" hx-target="#main" hx-push-url="true">Create New</button>
  </div>
  {% endblock %}

  {% block search_bar %}
  <div class="ui icon input">
    <input type="text" placeholder="Search...">
    <i class="circular search link icon"></i>
  </div>
  {% endblock %}

  {% if item_list %}
  {% set item_keys = item_info.display_list or item_list|table_keys %}

  {% if item_info.lookup_key in item_keys %}
  {% set primary_key = item_info.lookup_key %}
  {% endif %}

  <div class="ui basic container">
    <table class="ui very compact celled table head stuck unstackable">
      <caption>{{ item_info.name }}</caption>
      <thead>
        <tr>
          <th class="collapsing grey"></th>
          {% for key in item_keys %}
          {% if key==primary_key %}
          <th class="blue"><i class="key icon"></i>
            {{ key|capitalize }}
          </th>
          {% else %}
          <th>{{ key|capitalize }}</th>
          {% endif %}

          {% endfor %}

        </tr>
      </thead>

      <tbody>
        {% for item in item_list %}
        <tr>
          <td class="collapsing">
            <div class="ui buttons">
              <button class="ui compact icon button left attached" {% if item.detail_url %} hx-get="{{item.detail_url}}"
                hx-target="#main" hx-push-url="true" {% endif %}>
                <i class="eye icon"></i>

              </button>
              <button class="ui compact icon button right attached" {% if item.change_url %}
                hx-get="{{item.change_url}}" hx-target="#main" hx-push-url="true" {% endif %}>
                <i class="edit icon"></i>
              </button>
            </div>
          </td>

          {% for key in item_keys %}
          {% if key==primary_key %}
          <td class="selectable warning">{% if item.change_url %}<a href="{{item.change_url}}"
              hx-get="{{item.change_url}}" hx-target="#main" hx-push-url="true">{{
            item.fields[key] }}</a>{%
            else %}{{item.fields[key] }}{% endif %}</td>
          {% else %}
          <td>{{ item.fields[key] }}</td>{% endif %}
          {% endfor %}


        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
      </tfoot>
    </table>
  </div>
</div>
{% else %}
No Items found.
{% endif %}
{% endblock content %}