<script lang="ts">
  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
  import { goto } from "$app/navigation";
</script>

<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
  <!-- Breadcrumb -->
  <div class="text-sm breadcrumbs mb-4">
    <ul>
      <li>
        <a href="/" class="text-primary hover:text-primary-focus">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
            />
          </svg>
          Dashboard
        </a>
      </li>
      <li>
        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
      </li>
      <li class="font-semibold">Personalizar Permissões</li>
    </ul>
  </div>

  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center gap-3 mb-2">
      <div class="p-3 bg-info/10 rounded-xl">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-8 w-8 text-info"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
          />
        </svg>
      </div>
      <div class="flex-1">
        <h1 class="text-3xl font-bold text-base-content">
          Funcionalidade descontinuada
        </h1>
        <p class="text-base-content/60 mt-1">
          Agora as permissões são configuradas por ação em cada perfil no painel
          de permissões.
        </p>
      </div>
      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10 19l-7-7m0 0l7-7m-7 7h18"
          />
        </svg>
        Voltar
      </button>
    </div>
  </div>
  <div class="alert alert-info shadow-lg">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="stroke-current shrink-0 h-6 w-6"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
    <span>
      A personalização por usuário foi substituída por <strong
        >permissões por ação</strong
      >
      por perfil. Utilize o
      <a href="/ti/painel-permissoes" class="link link-primary"
        >Painel de Permissões</a
      > para configurar.
    </span>
  </div>
</ProtectedRoute>
