<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><%= t("login.title") %></title>
    <link rel="apple-touch-icon" sizes="180x180" href="<%= assetPath %>/images/app-icons/ios/apple-touch-icon.png">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="<%= assetPath %>/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-light.css">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next.css">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
</head>
<body>
<div class="container">
    <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto pt-4">
        <img class="img-fluid d-block mx-auto" style="height: 8rem;" src="<%= assetPath %>/images/icon-color.svg" aria-hidden="true">
        <h1 class="text-center"><%= t("login.heading") %></h1>

        <% if (failedAuth) { %>
            <div class="alert alert-warning">
                <%= t("login.incorrect-password") %>
            </div>
        <% } %>

        <form action="login" method="POST">
            <div class="form-group">
                <label for="password"><%= t("login.password") %></label>
                <div class="controls">
                    <input id="password" name="password" placeholder="" class="form-control" type="password">
                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input id="remember-me" name="rememberMe" value="1" type="checkbox"> <%= t("login.remember-me") %>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-success"><%= t("login.button") %></button>
            </div>
        </form>
    </div>
</div>

<script>
    // Required for correct loading of scripts in Electron
    if (typeof module === 'object') {window.module = module; module = undefined;}

    const device = getDeviceType()
    console.log("Setting device cookie to:", device);
    setCookie("trilium-device", device);

    function setCookie(name, value) {
        const date = new Date(Date.now() + 10 * 365 * 24 * 60 * 60 * 1000);
        const expires = "; expires=" + date.toUTCString();

        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    function getDeviceType() {
        if (window.location.search === '?desktop') return "desktop";
        if (window.location.search === '?mobile') return "mobile";
        return isMobile() ? "mobile" : "desktop";
    }

    // https://stackoverflow.com/a/73731646/944162
    function isMobile() {
        const mQ = matchMedia?.('(pointer:coarse)');
        if (mQ?.media === '(pointer:coarse)') return !!mQ.matches;

        if ('orientation' in window) return true;
        const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i
        return userAgentsRegEx.test(navigator.userAgent)
    }
</script>
</body>
</html>
