---
import KioskLayout from "/layouts/KioskLayout.astro";
import { getDecisionId } from "/scripts/store";
const id = getDecisionId();
---

<KioskLayout title="Not Authorized">
  <div
    class="w-full bg-[#FBFBFB] border-b border-b-[#E8E8E8] rounded-2xl p-6 flex flex-col items-center gap-6"
  >
    <div
      class="w-full rounded-2xl max-w-full text-center flex flex-col items-center gap-6"
    >
      <img src="/unauthorized.png" alt="Unauthorized" class="w-85 h-85" />
      <h2 class="text-4xl font-extrabold text-[#AF1D1D] mb-2">
        "Not Authorized"
      </h2>
      <div
        data-layer="Line 18"
        class="Line18 self-stretch h-0 outline-1 outline-offset-[-0.50px] outline-gray-200"
      >
      </div>

      <p class="text-3xl font-medium text-[#0A3B5C]">
        Please Contact The Administrator
      </p>
      {id && <p class="mt-2 text-slate-500">ID: {id}</p>}
    </div>
  </div>
  <script type="module">
    import { createSocket } from "/scripts/ws";
    import { clearFlow } from "/scripts/store";

    const socket = createSocket();
    socket.on("cycle:reset", () => {
      clearFlow();
      location.href = "/";
    });

    setTimeout(() => socket.emit("kiosk:ready"), 8000);
  </script>
</KioskLayout>