<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      th:href="'public/images/favicon-32x32.png'"
      href="../public/images/favicon-32x32.png"
    />
    <link
      th:href="'public/out.css'"
      href="../public/out.css"
      rel="stylesheet"
    />
    <script th:src="'public/htmx.min.js'" src="../public/htmx.min.js"></script>
    <title>Frontend Mentor | Multi-step form</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <main class="grid place-content-center w-screen h-screen bg-magnolia">
      <section hx-get="/get-form" hx-trigger="load" hx-swap="outerHTML">
        <!-- here be immediate hx-get for the form. to subscitute the body -->
        <img
          class="w-14 text-green-500 fill-current"
          th:src="'public/images/tail-spin.svg'"
          src="../public/images/tail-spin.svg"
          alt="loading..."
        />
      </section>

      <section class="absolute top-0 end-0" id="new-session-control">
        <button hx-get="/force-new-session">Request new session</button>
      </section>
      <div class="fixed inset-x-0 bottom-0 attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Source code at
        <a href="https://github.com/efim/Learning-HTMX">Your Name Here</a>.
      </div>
    </main>
  </body>
</html>
