<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=0.90, user-scalable=no, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style"
          content="black-translucent" />
    <meta name="theme-color"
          content="#F3F4F6"
          media="(prefers-color-scheme: light)" />
    <meta name="theme-color"
          content="#1F2937"
          media="(prefers-color-scheme: dark)" />
    <title>AnthoLume - {{ if .Register }}Register{{ else }}Login{{ end }}</title>
    <link rel="manifest" href="./manifest.json" />
    <link rel="stylesheet" href="./assets/style.css" />
    <!-- Service Worker / Offline Cache Flush -->
    <script src="/assets/lib/idb-keyval.min.js"></script>
    <script src="/assets/common.js"></script>
    <script src="/assets/index.js"></script>
    <style>
      /* ----------------------------- */
      /* -------- PWA Styling -------- */
      /* ----------------------------- */
      html,
      body {
        overscroll-behavior-y: none;
        margin: 0px;
      }

      html {
        height: calc(100% + env(safe-area-inset-bottom));
        padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
      }

      /* No Scrollbar - IE, Edge, Firefox */
      * {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* No Scrollbar - WebKit */
      *::-webkit-scrollbar {
        display: none;
      }
    </style>
  </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">
                  {{ template "svg/user" (dict "Size" 15) }}
                </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">
                  {{ template "svg/password" (dict "Size" 15) }}
                </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>
          <div class="pt-12 pb-12 text-center">
            {{ if .Config.RegistrationEnabled }} {{ 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 }} {{ end }}
            <p class="mt-4">
              <a href="./local" class="font-semibold underline">Offline / Local Mode</a>
            </p>
          </div>
        </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/images/book1.jpg" />
        <img class="w-full h-screen object-cover ease-in-out top-0 left-0"
             src="/assets/images/book2.jpg" />
        <img class="w-full h-screen object-cover ease-in-out top-0 left-0"
             src="/assets/images/book3.jpg" />
        <img class="w-full h-screen object-cover ease-in-out top-0 left-0"
             src="/assets/images/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>
