<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-100 dark:bg-gray-900">
    <head>
        <meta name="format-detection" content="telephone=no">

        <title>Login | UniFi Voucher</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">

        <meta name="description" content="UniFi Voucher Site is a web-based platform for generating and managing UniFi network guest vouchers">
        <meta name="author" content="Glenn de Haan">

        <meta property="og:title" content="Login | UniFi Voucher"/>
        <meta property="og:type" content="website"/>
        <meta property="og:description" content="UniFi Voucher Site is a web-based platform for generating and managing UniFi network guest vouchers"/>

        <link rel="manifest" href="<%= baseUrl %>/manifest.json">
        <link rel="shortcut icon" href="<%= baseUrl %>/images/favicon.ico">
        <link rel="apple-touch-icon" href="<%= baseUrl %>/images/icon/logo_256x256.png">

        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#139CDA">

        <link rel="preload" href="<%= baseUrl %>/images/logo.png" as="image">
        <link rel="preload" href="<%= baseUrl %>/dist/style.css" as="style">
        <link href="<%= baseUrl %>/dist/style.css" rel="stylesheet">
    </head>
    <body class="h-full">
        <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
            <div class="sm:mx-auto sm:w-full sm:max-w-sm">
                <img class="mx-auto h-24 w-auto" width="96" height="96" alt="UniFi Voucher Site Logo" src="<%= baseUrl %>/images/logo.png">
                <h2 class="mt-5 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 dark:text-white"><%= app_header %></h2>

                <% if(error) { %>
                    <div class="mt-5 rounded-md bg-red-700 p-4">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-white"><%= error_text %></h3>
                            </div>
                        </div>
                    </div>
                <% } %>
            </div>

            <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
                <% if(internalAuth) { %>
                    <form class="space-y-6" action="<%= baseUrl %>/login" method="post" enctype="multipart/form-data">
                        <div>
                            <label for="password" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white">Password</label>
                            <div class="mt-2">
                                <input type="password" id="password" name="password" required class="block w-full rounded-md border-0 dark:bg-white/5 py-1.5 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-inset focus:ring-sky-700 sm:text-sm sm:leading-6">
                            </div>
                        </div>

                        <div>
                            <button type="submit" class="flex w-full justify-center rounded-md bg-sky-700 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-xs hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">Sign in</button>
                        </div>
                    </form>
                <% } %>

                <% if(oidcAuth) { %>
                    <div>
                        <% if(internalAuth) { %>
                            <div class="relative mt-10">
                                <div class="absolute inset-0 flex items-center" aria-hidden="true">
                                    <div class="w-full border-t border-black/5 dark:border-white/5"></div>
                                </div>
                                <div class="relative flex justify-center text-sm font-medium leading-6">
                                    <span class="bg-gray-100 dark:bg-gray-900 px-6 text-gray-900 dark:text-white">Or continue with</span>
                                </div>
                            </div>
                        <% } %>

                        <div class="<%= internalAuth ? 'mt-6' : '' %>">
                            <a href="<%= baseUrl %>/oidc/login" class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent">
                                <svg class="h-5 w-5" viewBox="0 0 64 64" aria-hidden="true">
                                    <path fill="#f7931e" d="M29.1 6.4v54.5l9.7-4.5V1.7l-9.7 4.7z"></path>
                                    <path fill="#b2b2b2" d="M62.7 22.4L64 36.3l-18.7-4.1"></path>
                                    <path d="M40.5 19.6v6.2a29.54 29.54 0 0 1 10.6 3.8l6.9-4.2a43.585 43.585 0 0 0-17.5-5.8M9.7 40.2c0-6.9 7.5-12.7 17.7-14.4v-6.2C11.8 21.5 0 30 0 40.2 0 50.8 12.6 59.5 29.1 61v-6.1C18 53.5 9.7 47.4 9.7 40.2" fill="#b2b2b2"></path>
                                    <path d="M40.5 19.6v6.2a29.54 29.54 0 0 1 10.6 3.8l6.9-4.2a43.585 43.585 0 0 0-17.5-5.8M9.7 40.2c0-6.9 7.5-12.7 17.7-14.4v-6.2C11.8 21.5 0 30 0 40.2 0 50.8 12.6 59.5 29.1 61v-6.1C18 53.5 9.7 47.4 9.7 40.2" fill="#b2b2b2"></path>
                                </svg>
                                <span class="text-sm font-semibold leading-6">OpenID Connect</span>
                            </a>
                        </div>
                    </div>
                <% } %>

                <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
                    <a href="https://github.com/glenndehaan/unifi-voucher-site" aria-label="GitHub Project Link" target="_blank" rel="noreferrer noopener" class="hover:text-gray-600 dark:hover:text-gray-500">
                        <svg class="inline-block w-8" viewBox="0 0 42 42" fill="currentColor">
                            <path d="M21,0.5c-11.6,0-21,9.4-21,21c0,9.3,6,17.1,14.4,19.9c1.1,0.2,1.4-0.5,1.4-1c0-0.5,0-1.8,0-3.6C9.9,38.1,8.7,34,8.7,34c-1-2.4-2.3-3.1-2.3-3.1c-1.9-1.3,0.1-1.3,0.1-1.3c2.1,0.1,3.2,2.2,3.2,2.2c1.9,3.2,4.9,2.3,6.1,1.7c0.2-1.4,0.7-2.3,1.3-2.8c-4.7-0.5-9.6-2.3-9.6-10.4c0-2.3,0.8-4.2,2.2-5.6c-0.2-0.5-0.9-2.7,0.2-5.6c0,0,1.8-0.6,5.8,2.2c1.7-0.5,3.5-0.7,5.3-0.7c1.8,0,3.6,0.2,5.3,0.7c4-2.7,5.8-2.2,5.8-2.2c1.1,2.9,0.4,5,0.2,5.6c1.3,1.5,2.2,3.3,2.2,5.6c0,8.1-4.9,9.8-9.6,10.4c0.8,0.6,1.4,1.9,1.4,3.9c0,2.8,0,5.1,0,5.8c0,0.6,0.4,1.2,1.4,1C36,38.7,42,30.8,42,21.5C42,9.9,32.6,0.5,21,0.5z"></path>
                        </svg>
                    </a>
                </p>
            </div>
        </div>

        <script type="application/javascript">
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.querySelector('html').setAttribute('style', 'color-scheme: dark;');
            }

            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                const newColorScheme = event.matches ? "dark" : "light";

                if(newColorScheme === 'light') {
                    document.querySelector('html').removeAttribute('style');
                } else {
                    document.querySelector('html').setAttribute('style', 'color-scheme: dark;');
                }
            });
        </script>
    </body>
</html>
