<!DOCTYPE html>
<html class="no-js" lang="">
  <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"
      href="./assets/images/favicon-32x32.png"
    />
    <link href="../public/out.css" rel="stylesheet" />

    <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 class="grid place-content-center h-screen bg-magnolia">
    <!--[if lt IE 8]>
      <p class="browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
        your experience.
      </p>
    <![endif]-->

    <form
      class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
      id="form-step"
      th:fragment="formFragment(formData)"
      hx-post="/submit-step/1/2"
      hx-swap="outerHTML"
      action="/submit-step/1/2"
      method="post"
    >
      <summary
        class="w-full h-44 bg-no-repeat bg-cover md:row-span-2 md:tracking-widest bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
        id="sidebar"
        th:fragment="stepsSummary(formData)"
      >
        <ol
          class="grid grid-cols-[repeat(4,_auto)] gap-x-5 content-center items-center place-content-center h-24 md:flex-col md:h-full md:grid-rows-[repeat(4,_auto)] md:grid-cols-1 md:content-start md:p-10 md:gap-y-7 text-white text-sm uppercase"
        >
          <li
            class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]"
            th:each="stepNum: ${formData.stepsAmount}"
          >
            <div
              class="grid place-content-center w-8 h-8 font-bold text-white rounded-full border border-white"
              th:classappend="${stepNum.index} == ${formData.userAnswers.currentStep} ? '!bg-light-blue !text-marine-blue'"
              th:text="${stepNum.index}"
            >
              1
            </div>
            <p class="hidden md:flex md:flex-col">
              <span class="text-light-gray"
                >Step <span th:text="${stepNum.index}">1</span></span
              ><span class="font-bold" th:text="${stepNum.name}"
                >Your info</span
              >
            </p>
          </li>
          <li
            class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]"
            th:remove="all"
          >
            <div
              class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
            >
              2
            </div>
            <p class="hidden md:flex md:flex-col">
              <span class="text-light-gray">Step 2</span
              ><span class="font-bold">Select plan</span>
            </p>
          </li>
          <li
            class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]"
            th:remove="all"
          >
            <div
              class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
            >
              3
            </div>
            <p class="hidden md:flex md:flex-col">
              <span class="text-light-gray">Step 3</span
              ><span class="font-bold">Add-ons</span>
            </p>
          </li>
          <li
            class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]"
            th:remove="all"
          >
            <div
              class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
            >
              4
            </div>
            <p class="hidden md:flex md:flex-col">
              <span class="text-light-gray">Step 4</span
              ><span class="font-bold">summary</span>
            </p>
          </li>
        </ol>
      </summary>
      <section
        id="multipage-form-container"
        class="flex flex-col py-8 px-6 -mt-20 w-11/12 bg-white rounded-xl md:px-24 md:mt-0 md:w-full drop-shadow-xl md:drop-shadow-none"
      >
        <!-- Step 1 start -->
        <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
          Personal info
        </h1>
        <p class="py-3 text-cool-gray">
          Please provide your name, email address, and phone number.
        </p>
        <div class="contents">
          <label
            for="name"
            class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue"
            >Name</label
          >
          <input
            id="name"
            th:value="${formData.userAnswers.step1.name}"
            name="name"
            type="text"
            required
            placeholder="e.g. Stephen King"
            class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg focus:outline-none placeholder:text-cool-gray invalid:border-strawberry-red focus:border-marine-blue"
          />
        </div>
        <div class="contents">
          <label
            for="email"
            class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue"
            >Email Address</label
          >
          <input
            id="email"
            th:value="${formData.userAnswers.step1.email}"
            name="email"
            type="email"
            required
            placeholder="e.g. stephenking@lorem.com"
            class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg focus:outline-none placeholder:text-cool-gray invalid:border-strawberry-red focus:border-marine-blue"
          />
        </div>
        <!-- Following is email input field
             it has outer div that sets separate 'value' variable
             and innder div which denotes fragment, parametrized by this only variable
             now i should be able to render only this input field as fragment -->
        <div
          th:with="value=${formData.userAnswers.step1.phone},error=''"
          class="contents relative"
        >
          <div
            class="contents"
            hx-target="this"
            hx-swap="outerHTML"
            th:fragment="email-input (value,error)"
          >
            <label
              for="phone"
              class="pt-3 text-sm md:pt-5 md:pb-2 text-marine-blue"
              >Phone Number</label
            >
            <input
              id="phone"
              th:value="${value}"
              name="phone"
              type="tel"
              required
              placeholder="e.g. +1 234 567 890"
              class="p-1 px-4 h-10 text-sm font-semibold rounded border md:p-6 md:px-4 md:text-base md:rounded-lg focus:outline-none placeholder:text-cool-gray invalid:border-strawberry-red focus:border-marine-blue"
              th:classappend="${!error.isEmpty} ? 'border-strawberry-red' : ''"
              hx-post="/step1/phonenumber"
              hx-indicator="#ind"
            />
            <div
              th:if="${error} != null"
              th:text="${error}"
              class="text-sm text-strawberry-red">Please enter valid phone number</div>
            <img
              id="ind"
              src="../public/images/tail-spin.svg"
              th:src="'public/images/tail-spin.svg'"
              class="absolute w-14 h-14 htmx-indicator"
            />
          </div>
        </div>

        <!-- Step 1 end -->
      </section>
      <div class="md:hidden grow"></div>
      <section
        id="footer-controls"
        class="flex flex-row items-center py-4 w-full bg-white md:items-end md:h-full"
      >
        <div class="grow"></div>
        <input
          type="submit"
          class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-marine-blue"
          value="Next Step"
        />
        <a
          th:remove="all"
          href="step2.html"
          class="grid place-content-center mr-3 w-24 h-10 text-sm font-semibold text-white rounded md:mr-24 md:w-32 md:h-12 md:text-base md:rounded-lg bg-marine-blue"
          >Next Step</a
        >
      </section>
    </form>
    <div class="fixed inset-x-0 bottom-0 attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </div>
  </body>
</html>
