<!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>
    <!--[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]-->

    <main class="grid place-content-center h-screen">
      <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"
        hx-post="/submit-step/2/3"
        hx-swap="outerHTML"
        action="/submit-step/2/3"
        method="post"
        th:fragment="formFragment(formData)"
      >
        <summary
          class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
          id="sidebar"
          th:replace="~{step1::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]">
              <div
                class="grid place-content-center w-8 h-8 text-white rounded-full border border-white"
              >
                1
              </div>
              <p class="hidden md:flex md:flex-col">
                <span class="text-light-gray">Step 1</span
                ><span class="font-bold">Your info</span>
              </p>
            </li>
            <li class="items-center md:grid md:gap-x-4 md:grid-cols-[auto_1fr]">
              <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]">
              <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]">
              <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 2 start -->
          <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
            Select your plan
          </h1>
          <p class="py-3 mb-4 text-cool-gray">
            You have the option of monthly or yearly billing.
          </p>
          <div
            class="flex flex-col gap-y-3 my-3 w-full md:flex-row md:gap-x-4"
            id="plan-type-inputs"
            th:fragment="planTypesInputs(formData)"
          >
            <label
              for="ArcadePlanType"
              class="relative h-20 md:h-40 md:grow"
              th:each="planType: ${formData.availablePlans}"
              th:for="${planType}"
            >
              <input
                id="ArcadePlanType"
                th:id="${planType}"
                type="radio"
                name="plan-type"
                value="Arcade"
                th:value="${planType}"
                class="hidden peer"
                th:checked="${formData.userAnswers.step2.planType.toString()} == ${planType.toString()}"
                checked
              />
              <div
                class="grid absolute inset-y-0 inset-x-0 place-content-center h-full rounded-lg border md:grid-cols-1 md:p-4 grid-cols-[auto_1fr] border-light-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia/50 md:grid-rows-[1fr_auto_auto] hover:bg-magnolia/[.1] hover:border-purplish-blue"
              >
                <img
                  class="place-self-center px-4 md:row-span-1 md:place-self-start md:px-0"
                  th:src="${planType.iconPath}" src="../public/images/icon-arcade.svg" alt="" />
                <div class="flex flex-col items-start">
                  <h2 th:text="${planType}" class="font-semibold text-marine-blue">Arcade</h2>
                  <p
                    th:text="|$${formData.planCost(planType)}/${formData.periodCostLabel}|"
                    class="text-sm text-cool-gray"
                  >
                    $9/mo
                  </p>
                  <p th:if="${formData.userAnswers.step2.isYearly}" class="text-xs text-marine-blue">
                    2 months free
                  </p>
                </div>
              </div>
            </label>

            <label
              for="AdvancedPlanType"
              class="relative h-20 md:w-32"
              th:remove="all"
            >
              <input
                id="AdvancedPlanType"
                type="radio"
                name="plan-type"
                value="Advanced"
                class="hidden peer"
                th:checked="${formData.userAnswers.step2.planType.toString()} == 'Advanced'"
              />
              <div
                class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
              >
                <img src="../public/images/icon-advanced.svg" alt="" />
                <h2>Advanced</h2>
              </div>
            </label>

            <label
              for="ProPlanType"
              class="relative h-20 md:w-32"
              th:remove="all"
            >
              <input
                id="ProPlanType"
                type="radio"
                name="plan-type"
                value="Pro"
                class="hidden peer"
                th:checked="${formData.userAnswers.step2.planType.toString()} == 'Pro'"
              />
              <div
                class="absolute inset-y-0 inset-x-0 rounded-lg border border-cool-gray peer-checked:border-purplish-blue peer-checked:bg-magnolia"
              >
                <img src="../public/images/icon-pro.svg" alt="" />
                <h2>Pro</h2>
              </div>
            </label>
          </div>

          <div
            class="grid grid-flow-col-dense place-content-center mt-3 w-full rounded-lg md:mt-5 bg-light-gray/25"
          >
            <div
              class="inline-grid grid-cols-3 place-items-center h-12 text-sm font-bold"
            >
              <input
                class="mr-2 w-9 h-5 ml-2 rounded-full appearance-none mt-[0.3rem] bg-marine-blue after:absolute after:h-3 after:w-3 after:rounded-full after:border-none after:bg-neutral-100 after:transition-[background-color_0.2s,transform_0.2s] checked:after:ml-[1.2rem] after:ml-[0.25rem] after:mt-[0.25rem] hover:cursor-pointer col-start-2 row-start-1 peer md:mx-4"
                type="checkbox"
                name="isPackageYearly"
                role="switch"
                id="packageDuration"
                th:checked="${formData.userAnswers.step2.isYearly}"
                hx-post="/step2/planTypeInputs"
                hx-target="#plan-type-inputs"
                hx-swap="outerHTML"
              />
              <p
                class="row-start-1 text-marine-blue peer-checked:text-cool-gray"
              >
                Monthly
              </p>
              <p
                class="row-start-1 text-cool-gray peer-checked:text-marine-blue"
              >
                Yearly
              </p>
            </div>
          </div>

          <!-- Step 2 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"
        >
          <a
            hx-post="/submit-step/2/1"
            hx-swap="outerHTML"
            hx-target="#form-step"
            href="step1.html"
            class="ml-6 text-sm font-semibold md:pb-3 md:ml-24 md:text-base text-cool-gray"
            >Go Back</a
          >
          <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="step3.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>
    </main>
  </body>
</html>
