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

{% block content %}
<div class="flex bg-slate-50 dark:bg-slate-950">
  {% include "admin/includes/forge_sidebar.html" %}
  <main class="flex-1 min-h-screen">
    {% include "admin/includes/forge_topbar.html" %}
    <section class="px-4 md:px-6 py-6 space-y-4">
      {% for app in available_apps %}
        <article class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
          <h2 class="text-sm uppercase tracking-wide text-slate-500 mb-3 flex items-center gap-2">
            {% forge_icon app.icon "h-4 w-4" %}
            <span>{{ app.name|forge_labelize }}</span>
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2">
            {% for model in app.models %}
              <a href="{{ model.admin_url }}" class="flex items-center justify-between rounded-lg border border-slate-200 dark:border-slate-700 px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800">
                <span class="flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200">
                  {% forge_icon model.icon "h-4 w-4 text-slate-500" %}
                  {{ model.name|forge_labelize }}
                </span>
                {% forge_icon "external-link" "h-4 w-4 text-slate-400" %}
              </a>
            {% empty %}
              <p class="text-sm text-slate-500">No models available.</p>
            {% endfor %}
          </div>
        </article>
      {% empty %}
        <p class="text-sm text-slate-500">No applications available for your account.</p>
      {% endfor %}
    </section>
  </main>
</div>
{% endblock %}