{% load falco %}
<table class="min-w-full">
  <thead class="border text-gray-700 uppercase bg-gray-100 text-sm">
    {% with th_class="text-sm font-medium text-gray-900 border-r px-6 py-4 text-left" %}
      <tr>
        {% for header in objects|field_verbose_names:fields %}
          <th scope="col" class="{{ th_class }}">{{ header }}</th>
        {% endfor %}
        <th scope="col">Actions</th>
      </tr>
    {% endwith %}
  </thead>
  <tbody>
    {% with td_class="px-6 py-4 whitespace-nowrap text-sm font-medium border-r text-gray-900" %}
      {% for object in objects %}
        <tr class="border hover:bg-neutral-100">
          {% for field in fields %}
            {% if forloop.first %}
              <td class="{{ td_class }}">
                {% if detail_view %}
                  <a class="font-bold hover:underline"
                     href="{% url detail_view object|lookup %}">{{ object|getattr:field }}</a>
                {% else %}
                  {{ object|getattr:field }}
                {% endif %}
              </td>
            {% elif object|field_class_name:field == "ImageField" or object|field_class_name:field == "FileField" %}
              <td class="{{ td_class }}">
                {% if object|getattr:field %}
                  <a class="hover:underline"
                     href="{{ object|getattr:field|getattr:"url" }}">{{ object|getattr:field|getattr:"name" }}</a>
                {% endif %}
              </td>
            {% elif object|field_class_name:field == "BooleanField" %}
              <td class="{{ td_class }}">
                {% if object|getattr:field %}
                  {% heroicon_solid "check-circle" size="19" class="text-green-500 mx-auto" %}
                {% else %}
                  {% heroicon_solid "x-circle" size="19" class="text-red-500 mx-auto" %}
                {% endif %}
              </td>
            {% elif object|field_class_name:field == "CharField" and object|call_get_display:field %}
              <td class="{{ td_class }}">{{ object|call_get_display:field }}</td>
            {% else %}
              <td class="{{ td_class }}">{{ object|getattr:field }}</td>
            {% endif %}
          {% endfor %}
          <td class="{{ td_class }} flex gap-8">
            {% if detail_view %}
              <a class="hover:text-blue-500"
                 href="{% url detail_view object|lookup %}">{% heroicon_outline "eye" size="18" %}</a>
            {% endif %}
            {% if update_view %}
              <a class="hover:text-blue-500"
                 href="{% url update_view object|lookup %}">{% heroicon_outline "pencil-square" size="18" %}</a>
            {% endif %}
            {% if delete_view %}
              <form hx-boost="true"
                    hx-target="closest tr"
                    hx-push-url="false"
                    action="{% url delete_view object|lookup %}"
                    class="cursor-pointer text-red-600 hover:text-red-500"
                    method="post"
                    onsubmit="return confirm('Do you really want to delete this element?');">
                {% csrf_token %}
                <button type="submit">{% heroicon_outline "trash" size="18" %}</button>
              </form>
            {% endif %}
          </tr>
        {% endfor %}
      {% endwith %}
    </tbody>
  </table>
