{% load i18n %}

{% if app_list %}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
    {% for app in app_list %}
      <div class="bg-white dark:bg-slate-800 rounded-3xl border border-gray-100 dark:border-slate-700 shadow-sm overflow-hidden flex flex-col group transition-all hover:shadow-lg hover:-translate-y-1">
          <!-- App Header -->
          <div class="p-6 border-b border-gray-50 dark:border-slate-700/50 flex items-center justify-between bg-gray-50/50 dark:bg-slate-900/20">
              <div class="flex items-center gap-4">
                  <div class="w-12 h-12 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white">
                      <i class="pi pi-box text-xl"></i>
                  </div>
                  <h3 class="text-lg font-black tracking-tight text-gray-900 dark:text-white">
                      <a href="{{ app.app_url }}" class="hover:text-blue-600 transition-colors">{{ app.name }}</a>
                  </h3>
              </div>
              <a href="{{ app.app_url }}" class="text-gray-400 hover:text-blue-600 transition-colors">
                  <i class="pi pi-external-link"></i>
              </a>
          </div>
          
          <!-- Models List -->
          <div class="p-4 flex flex-col gap-1">
              {% for model in app.models %}
                  <div class="flex items-center justify-between p-3 rounded-2xl hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-all group/item">
                      <div class="flex items-center gap-3">
                          <i class="pi pi-angle-right text-[10px] text-blue-500 opacity-50 group-hover/item:opacity-100"></i>
                          <span class="text-sm font-bold text-gray-700 dark:text-slate-200">
                              {% if model.admin_url %}
                                  <a href="{{ model.admin_url }}" class="hover:text-blue-500 transition-colors">{{ model.name }}</a>
                              {% else %}
                                  {{ model.name }}
                              {% endif %}
                          </span>
                      </div>
                      
                      <div class="flex items-center gap-2 opacity-0 group-hover/item:opacity-100 transition-all">
                          {% if model.add_url %}
                              <a href="{{ model.add_url }}" class="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-600 hover:bg-blue-600 hover:text-white transition-all" title="{% translate 'Add' %}">
                                  <i class="pi pi-plus text-[10px]"></i>
                              </a>
                          {% endif %}
                          
                          {% if model.admin_url and show_changelinks %}
                              <a href="{{ model.admin_url }}" class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-600 transition-all" title="{% translate 'Change' %}">
                                  <i class="pi pi-list text-[10px]"></i>
                              </a>
                          {% endif %}
                      </div>
                  </div>
              {% endfor %}
          </div>
      </div>
    {% endfor %}
  </div>
{% else %}
  <div class="bg-gray-50 dark:bg-slate-900/50 p-12 rounded-[2rem] border border-dashed border-gray-200 dark:border-slate-800 text-center">
    <div class="w-16 h-16 bg-gray-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="pi pi-lock text-gray-400 text-2xl"></i>
    </div>
    <p class="text-gray-500 dark:text-slate-400 font-bold italic">{% translate 'You don’t have permission to view or edit anything.' %}</p>
  </div>
{% endif %}