{% extends "admin/base_site.html" %}
{% load i18n %}

{% block coltype %}colSM{% endblock %}

{% block breadcrumbs %}
<div class="flex items-center space-x-2 breadcrumbs">
  <a class="text-blue-500 hover:underline" href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
  <span class="text-gray-500">&rsaquo;</span>
  <a class="text-blue-500 hover:underline" href="{% url 'django-admindocs-docroot' %}">{% translate 'Documentation' %}</a>
  <span class="text-gray-500">&rsaquo;</span>
  <span class="text-gray-500">{% translate 'Models' %}</span>
</div>
{% endblock %}

{% block title %}{% translate 'Models' %}{% endblock %}

{% block content %}
<h1 class="text-2xl font-semibold mb-4">{% translate 'Model Documentation' %}</h1>

{% regroup models by app_config as grouped_models %}

<div id="content-main" class="space-y-8">
  {% for group in grouped_models %}
    <div class="module">
      <h2 id="app-{{ group.grouper.label }}" class="text-xl font-medium">{{ group.grouper.verbose_name }} ({{ group.grouper.name }})</h2>
      <table class="table-auto w-full mt-4">
        {% for model in group.list %}
          <tr>
            <th scope="col" class="text-left">
              <a class="text-blue-500 hover:underline" href="{% url 'django-admindocs-models-detail' app_label=model.app_label model_name=model.model_name %}">{{ model.object_name }}</a>
            </th>
          </tr>
        {% endfor %}
      </table>
    </div>
  {% endfor %}
</div>
{% endblock %}

{% block sidebar %}
<div id="content-related" class="sidebar space-y-4">
  <div class="module">
    <h2 class="text-lg font-medium">{% translate 'Model Groups' %}</h2>
    <ul class="list-disc pl-6 space-y-1">
      {% regroup models by app_config as grouped_models %}
      {% for group in grouped_models %}
        <li><a class="text-blue-500 hover:underline" href="#app-{{ group.grouper.label }}">{{ group.grouper.verbose_name }}</a></li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock %}
