{% load i18n %}

{% if app_list %}
  {% for app in app_list %}
    <div class="app-{{ app.app_label }} bg-white dark:bg-apple-darkcard border border-apple-border/40 dark:border-apple-darkborder/40 rounded-2xl shadow-sm overflow-hidden transition-all duration-200">
      <div class="px-6 py-3 bg-apple-bg/20 dark:bg-black/10 border-b border-apple-border/20 dark:border-apple-darkborder/20">
        <a href="{{ app.app_url }}" class="text-xs font-bold uppercase tracking-wider text-apple-secondary hover:text-apple-blue transition-colors {% if app.app_url in request.path %}text-apple-blue{% endif %}" title="{% blocktranslate with name=app.name %}Models in the {{ name }} application{% endblocktranslate %}">{{ app.name }}</a>
      </div>
      <div class="divide-y divide-apple-border/25 dark:divide-apple-darkborder/25">
        {% for model in app.models %}
          <div class="model-{{ model.object_name|lower }} px-6 py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 {% if model.admin_url in request.path %}bg-apple-blue/5 dark:bg-apple-blue/15 border-l-4 border-apple-blue{% else %}hover:bg-apple-bg/10 dark:hover:bg-black/10{% endif %} transition-all">
            <div class="flex-1 min-w-0 flex items-center gap-2.5">
              {% if 'user' in model.object_name|lower %}
                <svg class="w-4 h-4 text-apple-secondary/70 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 01-7.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
              {% elif 'group' in model.object_name|lower %}
                <svg class="w-4 h-4 text-apple-secondary/70 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
              {% elif 'site' in model.object_name|lower %}
                <svg class="w-4 h-4 text-apple-secondary/70 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 0a9.004 9.004 0 018.716 2.253M12 3a9.004 9.004 0 00-8.716 2.253m0 0A9.001 9.001 0 003 12c0 2.457.983 4.684 2.58 6.3M18.716 5.253A9.001 9.001 0 0121 12c0 2.457-.983 4.684-2.58 6.3m0 0A9.004 9.004 0 0112 21" /></svg>
              {% else %}
                <svg class="w-4 h-4 text-apple-secondary/70 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
              {% endif %}

              {% if model.admin_url %}
                <a href="{{ model.admin_url }}" class="text-sm font-semibold {% if model.admin_url in request.path %}text-apple-blue dark:text-blue-400{% else %}text-apple-text dark:text-apple-darktext{% endif %} hover:text-apple-blue transition-colors break-words" {% if model.admin_url in request.path %} aria-current="page"{% endif %}>{{ model.name }}</a>
              {% else %}
                <span class="text-sm font-semibold text-apple-text dark:text-apple-darktext break-words">{{ model.name }}</span>
              {% endif %}
            </div>

            <div class="flex items-center gap-3 self-end sm:self-auto">
              {% if model.add_url %}
                <a href="{{ model.add_url }}" class="inline-flex items-center justify-center p-1.5 bg-green-500/10 dark:bg-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/30 text-green-600 dark:text-green-400 rounded-lg transition-colors" title="{% translate 'Add' %}">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
                </a>
              {% endif %}

              {% if model.admin_url and show_changelinks %}
                {% if model.view_only %}
                  <a href="{{ model.admin_url }}" class="inline-flex items-center gap-1 px-3 py-1.5 bg-apple-bg dark:bg-black/40 border border-apple-border/40 dark:border-apple-darkborder/40 hover:bg-apple-border/20 dark:hover:border-apple-darkborder/60 text-apple-text dark:text-apple-darktext rounded-lg text-xs font-semibold tracking-wide transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    {% translate 'View' %}
                  </a>
                {% else %}
                  <a href="{{ model.admin_url }}" class="inline-flex items-center gap-1 px-3 py-1.5 bg-apple-bg dark:bg-black/40 border border-apple-border/40 dark:border-apple-darkborder/40 hover:bg-apple-border/20 dark:hover:border-apple-darkborder/60 text-apple-text dark:text-apple-darktext rounded-lg text-xs font-semibold tracking-wide transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" /></svg>
                    {% translate 'Change' %}
                  </a>
                {% endif %}
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
{% else %}
  <div class="bg-white dark:bg-apple-darkcard border border-apple-border/40 dark:border-apple-darkborder/40 rounded-2xl shadow-sm p-6 text-center text-apple-secondary">
    <p>{% translate 'You don’t have permission to view or edit anything.' %}</p>
  </div>
{% endif %}