<!DOCTYPE html>
<html>
  <head>
    <title>Baclight</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <script src="https://cdn.jsdelivr.net/gh/benkaiser/fileinput-image-resize@1.0.0/dist/bundle.js"></script>
  </head>

  <body>
    <main>
      <div class="w-full min-h-screen flex flex-col bg-black justify-center items-center">
        <div class="min-h-full w-[calc(100%-1rem)] mt-1 mb-2 flex grow justify-center shadow-[0_0_10px_3px_#93c5fd] rounded-xl bg-[#04153E]">
          <div class="relative h-full w-11/12 mt-8 px-5 flex flex-col grow items-center">
            <% if user_signed_in? %>
              <%= link_to "Sign Out", destroy_user_session_path, data: { turbo_method: :delete }, class: "absolute top-0 right-0 h-14 flex self-end items-center cursor-pointer text-xl text-platinum hover:text-atmosphere font-bold underline px-3" %>
            <% end %>
            <%= yield %>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

