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

<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
	<!-- Breadcrumb -->
	<div class="breadcrumbs mb-4 text-sm">
		<ul>
			<li>
				<a href={resolve('/')} 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={resolve('/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="mb-2 flex items-center gap-3">
			<div class="bg-info/10 rounded-xl p-3">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="text-info h-8 w-8"
					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-base-content text-3xl font-bold">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 gap-2" onclick={() => goto(resolve('/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="h-6 w-6 shrink-0 stroke-current"
			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={resolve('/ti/painel-permissoes')} class="link link-primary">Painel de Permissões</a> para configurar.
		</span>
	</div>
</ProtectedRoute>
