<!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">
    <style>
        body {
            /* Prevent the content from being rendered before the main stylesheet loads */
            display: none;
        }
    </style>
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-light.css" media="(prefers-color-scheme: light)">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/theme-next-dark.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="<%= assetPath %>/stylesheets/style.css">
    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
</head>
<body lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>">
<div class="container login-page">
    <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="<%= assetPathFragment %>/images/icon-color.svg" aria-hidden="true" draggable="false" >
        <h1 class="text-center"><%= t("login.heading") %></h1>

        <% if (ssoEnabled) { %>
            <a href="/authenticate" class="google-login-btn">
                <img src="<%= ssoIssuerIcon.length === 0 ? assetPathFragment + '/images/google-logo.svg' : ssoIssuerIcon %>" alt="<%= ssoIssuerName %>">
                <%= t("login.sign_in_with_sso", { ssoIssuerName: ssoIssuerName }) %>
            </a>
        <% } else { %>
            <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" autocomplete="current-password" autofocus>
                    </div>
                </div>
                <% if( totpEnabled ) { %>
                    <div class="form-group">
                        <label for="totpToken">TOTP Token</label>
                        <div class="controls">
                            <input id="totpToken" name="totpToken" placeholder="" class="form-control" type="text" autocomplete="one-time-code" required />
                        </div>
                    </div>
                <% } %>

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

                <div class="form-group">
                    <div class="checkbox">
                        <label class="tn-checkbox">
                            <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 src="<%= appPath %>/login.js" crossorigin type="module"></script>

</body>
</html>
