<script lang="ts">
  // Get the profile from the page data if available
  let { data } = $props();
  let profile = $derived(data.profile);
</script>

<div class="flex flex-col items-center justify-center min-h-[70vh] p-6">
  <div class="rounded-lg border border-gray-300 p-6 max-w-md w-full flex flex-col gap-6 text-center">
    <div class="flex flex-col items-center gap-2">
      <div class="text-red-600 bg-red-50 p-3 rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <h1 class="text-2xl font-semibold text-gray-800">Access Denied</h1>
      <p class="text-gray-600">You don't have permission to access the events section.</p>
    </div>

    <div class="flex flex-col gap-4">
      {#if profile}
        <p class="text-sm text-gray-500">
          Your current role: <span class="font-semibold">{profile.section_position || 'Not assigned'}</span>
        </p>
        {#if profile.section}
          <p class="text-sm text-gray-500">
            Section: <span class="font-semibold">{profile.section.name}</span>
          </p>
        {/if}
      {/if}
      
      <p class="text-gray-600">
        You need the <span class="font-semibold">events_manager</span> role to access this section.
        Please contact your administrator for assistance.
      </p>
    </div>
    
    <div class="flex flex-col gap-3">
      <a href="/private/home" class="rounded-md px-4 py-2 bg-blue-600 text-white">
        Go to Dashboard
      </a>
      <button 
        onclick={() => window.history.back()} 
        class="rounded-md px-4 py-2 border border-gray-300 text-gray-700"
        aria-label="Go back"
      >
        Go Back
      </button>
    </div>
  </div>
</div>