<!-- Vista Pública: Índice de Documentación de un SaaS -->
<!-- Marked.js para renderizar Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div class="min-h-screen bg-gray-50">
    <!-- Header del SaaS -->
    <div class="bg-white border-b shadow-sm">
        <div class="max-w-5xl mx-auto px-6 py-6 flex items-center gap-4">
            {{if .saas.LogoURL}}
            <img src="{{.saas.LogoURL}}" alt="{{.saas.Nombre}}" class="w-12 h-12 rounded-lg object-contain border border-gray-200">
            {{end}}
            <div>
                <h1 class="text-2xl font-bold text-gray-800">{{.saas.Nombre}}</h1>
                <p class="text-sm text-gray-500">{{.saas.Descripcion}}</p>
            </div>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-6 py-8">
        {{if not .grupos}}
        <div class="text-center py-16 text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 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 class="text-lg font-medium">Sin documentación publicada</p>
            <p class="text-sm mt-1">Aún no hay páginas disponibles para este producto.</p>
        </div>
        {{else}}
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {{range .grupos}}
            <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
                <div class="bg-[#8eb02f] px-4 py-3">
                    <h2 class="text-white font-semibold text-sm">{{.Categoria.Nombre}}</h2>
                    {{if .Categoria.Descripcion}}
                    <p class="text-green-50 text-xs mt-0.5">{{.Categoria.Descripcion}}</p>
                    {{end}}
                </div>
                <ul class="divide-y divide-gray-100">
                    {{range .Paginas}}
                    <li>
                        <a href="/docs/{{$.saas.Slug}}/{{.Slug}}"
                           class="flex items-center gap-2 px-4 py-3 hover:bg-gray-50 transition-colors text-sm text-gray-700 hover:text-[#8eb02f]">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400 flex-shrink-0" 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>
                            {{.Titulo}}
                        </a>
                    </li>
                    {{end}}
                </ul>
            </div>
            {{end}}
        </div>
        {{end}}
    </div>
</div>
