<script lang="ts">
  import { page } from '$app/state';
  import type { LayoutProps } from './$types';

  let { data, children }: LayoutProps = $props();
  const cc = $derived(data.chargecontroller);
  const qrcode = $derived(page.params.qrcode);
</script>

<div class="flex flex-col h-screen">
  <div class="flex flex-col fixed w-screen h-screen top-0 left-0 overflow-hidden">
    <div class="navbar bg-base-100 not-dark:shadow-xl dark:shadow-sm h-16">
      <div class="flex-1">
        <a class="btn btn-ghost text-xl" href="/">RossiniEnergy</a>
      </div>
      <div class="flex-none">
        <ul class="menu menu-horizontal px-1">
          <li><p>QRCODE: {qrcode}</p></li>
          <li>
            <details>
              <summary>PARK: {cc['park']}</summary>
              <ul class="bg-base-100 rounded-t-none p-2">
                <li><p>EN</p></li>
                <li><p>IT</p></li>
              </ul>
            </details>
          </li>
        </ul>
      </div>
    </div>
    {#await import('./Map.svelte') then { default: Map }}
      <Map class="grow h-10 -z-20" x={cc['latitude']} y={cc['longitude']}/>
    {/await}
  </div>
  <div class="z-20 mt-16 grow pointer-events-none">
    <div class="flex justify-center items-center h-full pointer-events-none">
      {@render children()}
    </div>
  </div>
</div>