<!DOCTYPE html>
<html lang="en" phx-socket={live_socket_path(@conn)}>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no"
    />
    <meta name="csrf-token" content={Phoenix.Controller.get_csrf_token()} />
    <title><%= assigns[:page_title] || "Flames Dashboard" %></title>
    <style nonce={csp_nonce(@conn, :style)}>
      <%= raw(render("app.css", %{})) %>
    </style>
    <link
      href="https://fonts.googleapis.com/css?family=Caesar+Dressing"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="bg-gradient-to-b bg-fixed from-orange-500 to-orange-800 h-screen">
    <div class="d-flex flex-column align-items-stretch layout-wrapper">
      <div class="flex-grow-1">
        <header class="d-flex container mx-auto mx-auto">
          <div id="logo" class="d-flex flex-column">
            <span class="fire">F</span>
            <span class="burn">l</span>
            <span class="burn">a</span>
            <span class="burn">m</span>
            <span class="burn">e</span>
            <span class="fire">s</span>
          </div>
        </header>
        <section id="main" role="main" class="container mx-auto pb-48">
          <div class="mx-2 p-2 sm:mx-auto bg-gradient-to-t from-slate-300 to-slate-100 rounded-xl shadow-lg flex items-center space-x-4 pb-6">
            <%= @inner_content %>
          </div>
        </section>
      </div>
      <footer class="flex-shrink-0"></footer>
    </div>
    <script nonce={csp_nonce(@conn, :script)}>
      <%= raw(render("app.js", %{})) %>
    </script>
  </body>
</html>
