<!-- Portal Dashboard -->
<div x-data="portalDashboard()" x-init="init()">

  <!-- Saludo -->
  <div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-800">
      Hola, {{ if .portalUser }}{{ .portalUser.Nombre }}{{ end }} 👋
    </h1>
    <p class="text-slate-500 text-sm mt-1">
      {{ if .isPartner }}
        Estás viendo todos los proyectos de tus clientes.
      {{ else }}
        Aquí puedes ver el avance de tus proyectos.
      {{ end }}
    </p>
  </div>

  <!-- Proyectos cards -->
  {{ if .isPartner }}
    <!-- Agrupado por cliente -->
    {{ range .grupos }}
    <div class="mb-8">
      <h2 class="text-sm font-bold text-slate-500 uppercase tracking-wide mb-3">
        {{ if .Cliente.Empresa }}{{ .Cliente.Empresa }}{{ else }}{{ .Cliente.Nombre }}{{ end }}
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {{ range .Proyectos }}
        <a href="/portal/proyecto/{{ .Slug }}" class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow p-5 block group">
          <div class="flex items-center gap-3 mb-3">
            <span class="w-3 h-3 rounded-full" style="background:{{ .Color }}"></span>
            <span class="font-semibold text-slate-800 group-hover:text-[#8eb02f] transition-colors text-sm">{{ .Nombre }}</span>
          </div>
          <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ .Descripcion }}</p>
          <div class="flex items-center justify-between mb-1">
            <span class="text-xs font-medium text-slate-500">Progreso</span>
            <span class="text-xs font-bold text-slate-700">{{ .Progreso }}%</span>
          </div>
          <div class="w-full bg-slate-100 rounded-full h-2">
            <div class="h-2 rounded-full" style="background:{{ .Color }};width:{{ .Progreso }}%"></div>
          </div>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xs px-2 py-0.5 rounded-full font-semibold" style="background:#f1f5f9;color:#475569">{{ .Estado }}</span>
            <span class="text-xs text-slate-400">Ver detalle →</span>
          </div>
        </a>
        {{ end }}
      </div>
    </div>
    {{ end }}
  {{ else }}
    <!-- Vista simple para cliente -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {{ range .proyectos }}
      <a href="/portal/proyecto/{{ .Slug }}" class="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow p-5 block group">
        <div class="flex items-center gap-3 mb-3">
          <span class="w-3 h-3 rounded-full" style="background:{{ .Color }}"></span>
          <span class="font-semibold text-slate-800 group-hover:text-[#8eb02f] transition-colors text-sm">{{ .Nombre }}</span>
        </div>
        <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ .Descripcion }}</p>
        <div class="flex items-center justify-between mb-1">
          <span class="text-xs font-medium text-slate-500">Progreso</span>
          <span class="text-xs font-bold text-slate-700">{{ .Progreso }}%</span>
        </div>
        <div class="w-full bg-slate-100 rounded-full h-2">
          <div class="h-2 rounded-full" style="background:{{ .Color }};width:{{ .Progreso }}%"></div>
        </div>
        <div class="mt-3 flex justify-between items-center">
          <span class="text-xs px-2 py-0.5 rounded-full font-semibold" style="background:#f1f5f9;color:#475569">{{ .Estado }}</span>
          <span class="text-xs text-slate-400">Ver detalle →</span>
        </div>
      </a>
      {{ end }}
    </div>
    {{ if not .proyectos }}
    <div class="text-center py-20 text-slate-400">
      <svg class="w-12 h-12 mx-auto mb-3 opacity-40" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/></svg>
      <p>Aún no tienes proyectos asignados.</p>
    </div>
    {{ end }}
  {{ end }}

</div>
