{% extends "ui/templates/base/layout.html" %}

{% block content %}
<section class="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Navigation Centre</p>
    <div class="mt-2 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
      <div>
        <h1 class="text-2xl font-bold text-slate-900">My Workspaces</h1>
        <p class="mt-1 max-w-3xl text-sm text-slate-500">Open the workspace allowed for your role. This page does not replace any existing module; it only gives a clean entry point to dashboards and portals.</p>
      </div>
      <span class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600">Reports Centre will return in final phase</span>
    </div>
  </div>

  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    {% for card in workspace_cards %}
    <a href="{{ card.url }}" class="group rounded-3xl border {% if current_workspace_code == card.code %}border-brand-400 bg-brand-50{% else %}border-slate-200 bg-white{% endif %} p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-md">
      <div class="flex items-start justify-between gap-3">
        <div>
          <span class="inline-flex rounded-full {% if current_workspace_code == card.code %}bg-brand-600 text-white{% else %}bg-slate-100 text-slate-600{% endif %} px-3 py-1 text-xs font-semibold">{{ card.badge }}</span>
          <h2 class="mt-4 text-lg font-bold text-slate-900">{{ card.title }}</h2>
        </div>
        <span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-500 ring-1 ring-slate-200 group-hover:text-brand-700">Open</span>
      </div>
      <p class="mt-3 text-sm leading-6 text-slate-500">{{ card.description }}</p>
      {% if current_workspace_code == card.code %}
      <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-brand-700">Current workspace</p>
      {% endif %}
    </a>
    {% endfor %}
  </div>
</section>
{% endblock %}