{% extends "app_home/tw4/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/tw4/_sidebar.html' %}
{% endblock %}


{% block content %}

{% for page in paginated %}

<!-- Section label — matches card.html uppercase tracking style -->
<h2 class="text-lg font-bold text-gray-700 uppercase tracking-wider mb-6 {% if not forloop.first %}mt-10{% endif %}">
  {{ page.0 }}
</h2>

<!-- App grid — card.html "Small Cards" pattern -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">

  {% for app in page.1 %}{% if app.is_allowed %}
  <a href="{{ app.url }}"
     class="bg-white rounded-xl shadow-sm p-4 flex flex-col items-center gap-2
            hover:shadow-md transition group">

    <!-- Icon badge — indigo tint, flips to solid on hover -->
    <div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl
                flex items-center justify-center
                group-hover:bg-indigo-600 group-hover:text-white transition">
      <i class="fa-solid {{ app.icon }} fa-lg"></i>
    </div>

    <!-- Label -->
    <p class="text-xs font-semibold text-gray-700 text-center leading-tight">
      {{ app.displayname }}
    </p>

  </a>
  {% endif %}{% endfor %}

</div>

{% endfor %}

{% endblock %}