<!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="stylesheet"
      href="static/public/out.css"
      type="text/css"
      media="screen"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="static/public/images/favicon-32x32.png"
    />

    <title>THIS IS FILE FOR THE COMPONENT</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-items-center w-screen h-screen">
      {{/* only things inside of block component are used, yay */}}
      {{ block "results-summary-component" . }}
      <article
        class="flex flex-col w-full h-full md:flex-row md:bg-white md:rounded-3xl md:shadow-2xl md:shadow-light-lavender/50 md:w-[715px] md:h-[500px]"
      >
        <section
          id="results-pane"
          class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t from-50% rounded-b-3xl md:justify-around md:w-1/2 md:rounded-3xl from-light-royal-blue to-light-slate-blue"
        >
          <h1 class="font-bold md:pt-2 md:text-xl text-pale-blue">
            Your Result
          </h1>
          <div
            class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full md:w-44 md:h-44 from-violet-blue/60 to-persian-blue/75"
          >
            <span class="text-5xl font-extrabold md:text-6xl"
              >{{ .TotalScore }}</span
            >
            <span class="text-pale-blue"> of 100 </span>
          </div>
          <div class="flex flex-col gap-y-3 items-center">
            <h2 class="text-xl font-bold md:text-2xl">Great</h2>
            <p class="text-sm text-center md:text-base text-pale-blue">
              You scored higher than {{ .UpperPercent }}% of the people who have
              taken these tests.
            </p>
          </div>
        </section>

        <section
          id="summary-pane"
          class="flex flex-col gap-y-4 p-7 md:justify-around md:px-8 md:w-1/2"
        >
          <h2 class="font-bold md:text-xl">Summary</h2>
          <dl class="flex flex-col gap-y-4">
            {{ range .Categories }}
            <div
              class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
              style="--summary-item-color-var: {{ .ColorHsl }}"
            >
              <img src="{{ .IconPath }}" alt="" class="pr-2" />
              <dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
              <dd class="flex flex-row">
                <strong class="pr-2">{{ .Score }}</strong>
                <span class="text-dark-gray-blue">/ 100</span>
              </dd>
            </div>
            {{ end }}
          </dl>
          <a
            href="/"
            flex
            flex-row
            class="grid place-items-center w-full h-12 text-white rounded-full bg-dark-gray-blue"
          >
            Continue
          </a>
        </section>
      </article>
      {{ end }}
    </main>
    <footer class="fixed inset-x-0 bottom-1 attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Your Name Here</a>.
    </footer>
  </body>
</html>
