<main class="flex justify-center">
  <div class="absolute top-0 right-0 mt-3 mr-2">
    <div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
      <input
        type="checkbox"
        name="toggle"
        id="toggle"
        phx-click={JS.dispatch("server:toggle_theme")}
        class="bg-yellow-200 border-yellow-400 mr-1 focus:ring-transparent toggle-checkbox absolute block w-6 h-6 rounded-full border-2 appearance-none cursor-pointer transition-colors ease-in-out duration-200"
      />
      <label
        for="toggle"
        class="toggle-label block h-8 -ml-1 -mt-1 rounded-full bg-gray-300 cursor-pointer transition-colors ease-in-out duration-200"
      ></label>
    </div>
  </div>

  <div class="w-full lg:w-3/4 my-8 mx-5 lg:mx-0">
    <%= @inner_content %>
  </div>

  <div class="fixed bottom-0 w-full bg-white dark:bg-gray-800 py-2">
    <a
      class="text-sm float-right mr-2 text-gray-600 dark:text-gray-200 hover:underline"
      href="https://github.com/sponsors/akoutmos"
      target="_blank"
    >
      Made with ❤️ by Alex Koutmos
    </a>
  </div>
</main>
