<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="manifest" href="./manifest.json" />
    <meta
      name="theme-color"
      content="#F3F4F6"
      media="(prefers-color-scheme: light)"
    />
    <meta
      name="theme-color"
      content="#1F2937"
      media="(prefers-color-scheme: dark)"
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Book Manager - {{if .Register}}Register{{else}}Login{{end}}</title>
  </head>
  <body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
    <div class="flex flex-wrap w-full">
      <div class="flex flex-col w-full md:w-1/2">
        <div
          class="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
        >
          <p class="text-3xl text-center">Welcome.</p>
          <form
            class="flex flex-col pt-3 md:pt-8"
            {{if
            .Register}}action="./register"
            {{else}}action="./login"
            {{end}}
            method="POST"
          >
            <div class="flex flex-col pt-4">
              <div class="flex relative">
                <span
                  class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
                >
                  <svg
                    width="15"
                    height="15"
                    fill="currentColor"
                    viewBox="0 0 1792 1792"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"
                    ></path>
                  </svg>
                </span>
                <input
                  type="text"
                  id="username"
                  name="username"
                  class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
                  placeholder="Username"
                />
              </div>
            </div>
            <div class="flex flex-col pt-4 mb-12">
              <div class="flex relative">
                <span
                  class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
                >
                  <svg
                    width="15"
                    height="15"
                    fill="currentColor"
                    viewBox="0 0 1792 1792"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M1376 768q40 0 68 28t28 68v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-320q0-185 131.5-316.5t316.5-131.5 316.5 131.5 131.5 316.5q0 26-19 45t-45 19h-64q-26 0-45-19t-19-45q0-106-75-181t-181-75-181 75-75 181v320h736z"
                    ></path>
                  </svg>
                </span>
                <input
                  type="password"
                  id="password"
                  name="password"
                  class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
                  placeholder="Password"
                />
                <span class="absolute -bottom-5 text-red-400 text-xs"
                  >{{ .Error }}</span
                >
              </div>
            </div>
            <button
              type="submit"
              class="w-full px-4 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2"
            >
              {{if .Register}}
              <span class="w-full"> Register </span>
              {{else}}
              <span class="w-full"> Submit </span>
              {{end}}
            </button>
          </form>
          {{ if .RegistrationEnabled }}
          <div class="pt-12 pb-12 text-center">
            {{ if .Register }}
            <p>
              Trying to login?
              <a href="./login" class="font-semibold underline">
                Login here.
              </a>
            </p>
            {{else}}
            <p>
              Don&#x27;t have an account?
              <a href="./register" class="font-semibold underline">
                Register here.
              </a>
            </p>
            {{end}}
          </div>
          {{ end }}
        </div>
      </div>
      <div
        class="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block"
      >
        <img
          class="w-full h-screen object-cover ease-in-out top-0 left-0"
          src="/assets/book1.jpg"
        />
        <img
          class="w-full h-screen object-cover ease-in-out top-0 left-0"
          src="/assets/book2.jpg"
        />
        <img
          class="w-full h-screen object-cover ease-in-out top-0 left-0"
          src="/assets/book3.jpg"
        />
        <img
          class="w-full h-screen object-cover ease-in-out top-0 left-0"
          src="/assets/book4.jpg"
        />
      </div>
    </div>
    <style>
      .image-fader img {
        position: absolute;
        animation-name: imagefade;
        animation-iteration-count: infinite;
        animation-duration: 60s;
      }

      @keyframes imagefade {
        0% {
          opacity: 1;
        }
        17% {
          opacity: 1;
        }
        25% {
          opacity: 0;
        }
        92% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      .image-fader img:nth-of-type(1) {
        animation-delay: 45s;
      }
      .image-fader img:nth-of-type(2) {
        animation-delay: 30s;
      }
      .image-fader img:nth-of-type(3) {
        animation-delay: 15s;
      }
      .image-fader img:nth-of-type(4) {
        animation-delay: 0;
      }
    </style>
  </body>
</html>

<!-- https://stackoverflow.com/questions/60748752/change-an-image-after-some-time -->
