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

        <title>Kiosk | 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="Kiosk | 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/kiosk/logo.png" as="image">
        <link rel="preload" href="<%= baseUrl %>/images/kiosk/logo_dark.png" as="image">
        <link rel="preload" href="<%= baseUrl %>/images/kiosk/bg.jpg" as="image">
        <link rel="preload" href="<%= baseUrl %>/dist/style.css" as="style">
        <link href="<%= baseUrl %>/dist/style.css" rel="stylesheet">
        <% if(typeof voucherCode !== 'undefined') { %>
            <style>
                .animate-countdown {
                    animation: countdown <%= timeout %>s linear forwards;
                    will-change: transform;
                }
            </style>
        <% } %>
    </head>
    <body class="min-h-screen flex flex-col items-center justify-center p-4">
        <% if(typeof voucherCode !== 'undefined') { %>
            <div id="timer-container" class="timer-progress bg-gray-200 dark:bg-gray-700">
                <div id="timer-bar" class="bg-sky-600 h-full"></div>
            </div>
        <% } else { %>
            <% if(kiosk_homepage) { %>
                <a href="<%= baseUrl %>/vouchers" class="p-2 fixed top-2 left-2 text-md bg-sky-700 text-white rounded-md flex items-center justify-center hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
                        <path fill-rule="evenodd" d="M19 10a.75.75 0 0 0-.75-.75H8.704l1.048-.943a.75.75 0 1 0-1.004-1.114l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 1 0 1.004-1.114l-1.048-.943h9.546A.75.75 0 0 0 19 10Z" clip-rule="evenodd" />
                    </svg>
                    Admin UI
                </a>
            <% } %>
        <% } %>

        <div class="fixed top-0 left-0 w-full h-full -z-20">
            <img src="<%= baseUrl %>/images/kiosk/bg.jpg" alt="Kiosk Background" class="w-full h-full object-cover"/>
        </div>
        <div class="fixed top-0 left-0 w-full h-full -z-10 bg-white/70 dark:bg-black/70"></div>

        <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg border border-black/5 dark:border-white/5 shadow-sm z-10 relative">
            <div class="p-4 border-b border-black/5 dark:border-white/5">
                <img class="dark:hidden block mx-auto h-24 w-auto" width="48" height="48" alt="UniFi Voucher Site Logo" src="<%= baseUrl %>/images/kiosk/logo.png">
                <img class="dark:block hidden mx-auto h-24 w-auto" width="48" height="48" alt="UniFi Voucher Site Logo" src="<%= baseUrl %>/images/kiosk/logo_dark.png">
                <h1 class="mt-4 text-2xl font-semibold text-center text-gray-900 dark:text-white"><%= t('title') %></h1>

                <% 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="p-4">
                <% if(typeof voucherCode === 'undefined') { %>
                    <div class="block">
                        <form id="locale-form" class="mb-6<%= Object.keys(languages).length < 2 ? ' hidden' : '' %>" action="<%= baseUrl %>/kiosk" method="get">
                            <label for="locale" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('language') %></label>
                            <div class="mt-2">
                                <select id="locale" name="locale" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
                                    <% Object.keys(languages).forEach((l) => { %>
                                        <option value="<%= l %>-<%= l %>"<%= l === language ? ' selected' : '' %>><%= languages[l] %></option>
                                    <% }); %>
                                </select>
                            </div>
                        </form>
                        <form id="voucher-form" class="space-y-6" action="<%= baseUrl %>/kiosk?locale=<%= language %>-<%= language %>" method="post" enctype="multipart/form-data">
                            <div class="<%= voucher_types.length < 2 ? 'hidden' : '' %>">
                                <label for="voucher-type" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('type') %></label>
                                <div class="mt-2">
                                    <select id="voucher-type" name="voucher-type" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6 **:text-black">
                                        <% voucher_types.forEach((type) => { %>
                                            <option value="<%= type.raw %>"><%= timeConvert(type.expiration, language) %>, <%= type.usage === '1' ? t('singleUse') : type.usage === '0' ? `${t('multiUse')} (${t('unlimitedUse')})` : `${t('multiUse')} (${type.usage}x)` %><%= typeof type.upload !== "undefined" ? `, ${t('uploadLimit')}: ${bytesConvert(type.upload, 1, true)}` : '' %><%= typeof type.download !== "undefined" ? `, ${t('downloadLimit')}: ${bytesConvert(type.download, 1, true)}` : '' %><%= typeof type.megabytes !== "undefined" ? `, ${t('dataLimit')}: ${bytesConvert(type.megabytes, 2)}` : '' %></option>
                                        <% }); %>
                                    </select>
                                </div>
                            </div>
                            <% if(kiosk_name_required) { %>
                                <div>
                                    <label for="voucher-note" class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"><%= t('guestName') %></label>
                                    <div class="mt-2">
                                        <input type="text" id="voucher-note" name="voucher-note" autocomplete="off" required class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white dark:bg-white/5 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                    </div>
                                </div>
                            <% } %>
                            <button id="generate-button" class="w-full h-16 text-lg bg-sky-700 text-white rounded-md flex items-center justify-center font-medium hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
                                    <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
                                    <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
                                    <line x1="12" y1="20" x2="12" y2="20"></line>
                                </svg>
                                <%= t('generate') %>
                            </button>
                        </form>
                        <div id="generating-button" class="hidden w-full h-16 text-lg bg-sky-600 text-white rounded-md flex items-center justify-center font-medium">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="12" y1="2" x2="12" y2="6"></line>
                                <line x1="12" y1="18" x2="12" y2="22"></line>
                                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                                <line x1="2" y1="12" x2="6" y2="12"></line>
                                <line x1="18" y1="12" x2="22" y2="12"></line>
                                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                            </svg>
                            <%= t('generating') %> ...
                        </div>
                    </div>
                <% } else { %>
                    <div class="space-y-4">
                        <div class="rounded-lg border-0 ring-1 ring-inset ring-gray-300 dark:ring-white/10 p-4 bg-white dark:bg-gray-900">
                            <h2 class=" text-center text-sm mb-2 text-gray-900 dark:text-white">
                                <%= t('use') %>:
                            </h2>
                            <div class="text-center text-2xl font-mono tracking-wider mb-2 text-gray-900 dark:text-white">
                                <%= voucherCode %>
                            </div>
                            <div class="text-center text-sm text-gray-900 dark:text-white mb-2">
                                <% if(unifiSsidPassword !== '') { %>
                                    <%= t('connect') %>: <strong><%= unifiSsid %></strong>,<br/>
                                    <%= t('password') %>: <strong><%= unifiSsidPassword %></strong> <%= t('or') %>,<br/>
                                <% } else { %>
                                    <%= t('connect') %>: <strong><%= unifiSsid %></strong> <%= t('or') %>,<br/>
                                <% } %>
                                <%= t('scan') %>:
                            </div>
                            <div class="flex justify-center">
                                <img src="<%= qr %>" alt="Scan to Connect QR Code"/>
                            </div>
                        </div>

                        <% if(email_enabled) { %>
                            <form class="grid gap-4" id="email-form" action="<%= baseUrl %>/kiosk?locale=<%= language %>-<%= language %>" method="post" enctype="multipart/form-data">
                                <% if(typeof email === 'undefined') { %>
                                    <div class="space-y-2">
                                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                            <%= t('email') %> (<%= t('optional') %>)
                                        </label>
                                        <input id="email" type="email" name="email" placeholder="<%= t('enterEmail') %>" class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-inset ring-gray-300 dark:ring-white/10 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6" required/>
                                    </div>

                                    <input id="voucher" type="hidden" name="id" value="<%= voucherId %>"/>
                                    <input id="voucher" type="hidden" name="code" value="<%= voucherCode %>"/>

                                    <button id="email-button" type="submit" class="w-full bg-sky-700 text-white py-2 rounded-md flex items-center justify-center hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                                            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                        </svg>
                                        <%= t('send') %>
                                    </button>

                                    <div id="sending-button" class="hidden w-full bg-sky-700/80 text-white py-2 rounded-md flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <line x1="12" y1="2" x2="12" y2="6"></line>
                                            <line x1="12" y1="18" x2="12" y2="22"></line>
                                            <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
                                            <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
                                            <line x1="2" y1="12" x2="6" y2="12"></line>
                                            <line x1="18" y1="12" x2="22" y2="12"></line>
                                            <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
                                            <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
                                        </svg>
                                        <%= t('sending') %> ...
                                    </div>
                                <% } else { %>
                                    <div class="w-full bg-green-600 text-white py-2 rounded-md flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                        </svg>
                                        <%= t('sent') %>
                                    </div>
                                <% } %>
                            </form>
                        <% } %>
                    </div>
                <% } %>
            </div>

            <% if(typeof voucherCode !== 'undefined') { %>
                <div class="p-4 border-t border-black/5 dark:border-white/5 flex justify-center">
                    <a href="<%= baseUrl %>/kiosk" class="px-4 py-2 border dark:border-gray-700 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="19" y1="12" x2="5" y2="12"></line>
                            <polyline points="12 19 5 12 12 5"></polyline>
                        </svg>
                        <%= t('back') %>
                    </a>
                </div>
            <% } %>
        </div>

        <script type="application/javascript">
            const voucherForm = document.querySelector('#voucher-form');
            const localeForm = document.querySelector('#locale-form');
            const localeInput = document.querySelector('#locale');
            const emailForm = document.querySelector('#email-form');
            const generateButton = document.querySelector('#generate-button');
            const generatingButton = document.querySelector('#generating-button');
            const emailButton = document.querySelector('#email-button');
            const sendingButton = document.querySelector('#sending-button');

            if(localeInput) {
                localeInput.addEventListener('change', () => {
                    localeForm.submit();
                });
            }

            if(voucherForm) {
                voucherForm.addEventListener('submit', () => {
                    generateButton.classList.add('hidden');
                    generatingButton.classList.remove('hidden');
                });
            }

            if(emailForm) {
                emailForm.addEventListener('submit', () => {
                    emailButton.classList.add('hidden');
                    sendingButton.classList.remove('hidden');
                });
            }
        </script>
        <% if(typeof voucherCode !== 'undefined') { %>
            <script type="application/javascript">
                const timerContainer = document.querySelector('#timer-container');
                const timerBar = document.querySelector('#timer-bar');

                timerBar.classList.remove('animate-countdown');
                void timerBar.offsetWidth;
                timerBar.classList.add('animate-countdown');

                let timeLeft = parseInt('<%= timeout %>');
                setInterval(() => {
                    timeLeft--;

                    if (timeLeft <= 0) {
                        window.location.href = '<%= baseUrl %>/kiosk';
                    }
                }, 1000);
            </script>
        <% } %>
    </body>
</html>
