<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Login</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/images/app-icons/ios/apple-touch-icon.png">
</head>
<body>
<div class="container">
    <div class="col-xs-12 col-sm-10 col-md-6 col-lg-4 col-xl-4 mx-auto" style="padding-top: 25px;">
        <h1>Trilium login</h1>

        <% if (failedAuth) { %>
            <div class="alert alert-warning">
                Username and / or password are incorrect. Please try again.
            </div>
        <% } %>

        <form action="login" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <div class="controls">
                    <input id="username" name="username" placeholder="" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label for="password">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="remember_me" value="1" type="checkbox"> Remember me
                    </label>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-success">Login</button>
            </div>
        </form>
    </div>
</div>

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

    let device;

    if (window.location.search === '?desktop') {
        device = "desktop";
    }
    else if (window.location.search === '?mobile') {
        device = "mobile";
    }
    else {
        // mobile device detection based on https://stackoverflow.com/a/24600597/944162
        device = /Mobi/.test(navigator.userAgent) ? "mobile" : "desktop";
    }

    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=/";
    }
</script>

<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</body>
</html>