<!-- Vista Privada: Índice de Documentación de un SaaS (requiere login) -->
<div class="bg-white rounded-lg shadow">
    <!-- Header -->
    <div class="border-b px-6 py-5 flex items-center gap-4">
        {{if .saas.LogoURL}}
        <img src="{{.saas.LogoURL}}" alt="{{.saas.Nombre}}" class="w-10 h-10 rounded-lg object-contain border border-gray-200">
        {{end}}
        <div>
            <h1 class="text-xl font-bold text-gray-800">{{.saas.Nombre}}</h1>
            <p class="text-sm text-gray-500">{{.saas.Descripcion}}</p>
        </div>
    </div>

    <div class="p-6">
        {{if not .grupos}}
        <div class="text-center py-12 text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto mb-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <p>Sin páginas disponibles para tu perfil en este producto.</p>
        </div>
        {{else}}
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {{range .grupos}}
            <div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
                <div class="bg-[#8eb02f] px-4 py-3">
                    <h2 class="text-white font-semibold text-sm">{{.Categoria.Nombre}}</h2>
                </div>
                <ul class="divide-y divide-gray-100">
                    {{range .Paginas}}
                    <li>
                        <a href="/app/docs/{{$.saas.Slug}}/{{.Slug}}"
                           class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 transition-colors text-sm">
                            <span class="text-gray-700 hover:text-[#8eb02f]">{{.Titulo}}</span>
                            {{if eq .Visibilidad "private"}}
                            <span class="text-xs text-yellow-600 bg-yellow-50 px-1.5 py-0.5 rounded">🔒 Privado</span>
                            {{end}}
                        </a>
                    </li>
                    {{end}}
                </ul>
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
</div>
