---
import MainLayout from "@/layouts/MainLayout.astro";
import Header from "@/components/Header.astro";
import VoluntariosTable from "../../../components/admin/VoluntariosTable.vue";

const { locale } = Astro.params;
---

<MainLayout theme="cdrpj" title="Dashboard de Voluntarios" noindex>
  <div class="top-16 relative mb container mx-auto">
    <Header />
  </div>
  <main class="container mx-auto px-4 py-10 mt-8">
    <div class="flex flex-col lg:w-1/2 items-center mx-auto mb-6">
      <h1 class="text-white text-2xl uppercase font-bold text-center mb-3 font-primary">
        Admin
      </h1>
      <h2 class="text-colorPrimary text-3xl lg:text-5xl font-bold text-center font-secondary">
        Dashboard de Voluntarios
      </h2>
    </div>
    <nav class="flex justify-center gap-2 mb-10">
      <a href={`/${locale}/admin/dashboard`} class="btn btn-ghost btn-sm text-colorPrimary">Dashboard</a>
      <a href={`/${locale}/admin`} class="btn btn-primary btn-sm">Voluntarios</a>
    </nav>
    <VoluntariosTable client:load />
  </main>
</MainLayout>