<script>
  import { persistentSettings } from '$lib/persistent_store'
  let { children } = $props()
  import '../app.css'
</script>

<div
  class="w-screen h-screen flex flex-col"
  data-theme={$persistentSettings.darkmode ? 'darkgray' : 'emerald'}
>
  {@render children()}
  <footer
    class="footer sm:footer-horizontal bg-neutral text-neutral-content items-center pt-3 pb-3 pl-6 pr-6"
  >
    <aside class="grid-flow-col">
      <p>Powered by LibreCharge - Licensed under GNU AGPL v3</p>
    </aside>
    <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end text-3xl">
      <label class="swap swap-rotate">
        <!-- this hidden checkbox controls the state -->
        <input type="checkbox" bind:checked={$persistentSettings.darkmode} />

        <!-- sun icon -->
        <i class="bi bi-sun swap-off"></i>

        <!-- moon icon -->
        <i class="bi bi-moon swap-on"></i>
      </label>
      <a
        aria-label="Source Code"
        href="https://git.bluemedia.dev/Bluemedia/simple-ocpp-cs"
        target="_blank"
      >
        <i class="bi bi-git"></i>
      </a>
    </nav>
  </footer>
</div>
