<script>
  import { resolve } from "$app/paths";
</script>

<div class="space-y-4">
  <h2 class="text-3xl font-bold text-brand-dark">Recursos Humanos</h2>

  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
    <h3 class="text-lg font-bold text-brand-dark col-span-4">Funcionários</h3>
    <a
      href={resolve("/recursos-humanos/funcionarios/cadastro")}
      class="p-4 rounded-xl border hover:shadow bgbase-100"
      >Cadastrar Funcionários</a
    >
    <a
      href={resolve("/recursos-humanos/funcionarios")}
      class="p-4 rounded-xl border hover:shadow bgbase-100">Editar Cadastro</a
    >
    <a
      href={resolve("/recursos-humanos/funcionarios/excluir")}
      class="p-4 rounded-xl border hover:shadow bgbase-100">Excluir Cadastro</a
    >
    <a
      href={resolve("/recursos-humanos/funcionarios/relatorios")}
      class="p-4 rounded-xl border hover:shadow bgbase-100">Relatórios</a
    >

    <h3 class="text-lg font-bold text-brand-dark col-span-4">Simbolos</h3>
    <a
      href={resolve("/recursos-humanos/simbolos/cadastro")}
      class="p-4 rounded-xl border hover:shadow bgbase-100"
      >Cadastrar Simbolos</a
    >
    <a
      href={resolve("/recursos-humanos/simbolos")}
      class="p-4 rounded-xl border hover:shadow bgbase-100">Listar Simbolos</a
    >
  </div>
</div>
