{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template core/loginform

    Thinkera sign-in form: Google first when it is set up, then email and password, then the way to sign up.
    Same fields, token and scripts as the core form; no language menu or cookie footnote.

    Example context (json):
    {
        "canloginbyemail": true, "cansignup": true, "showloginform": true, "error": "", "info": "",
        "forgotpasswordurl": "#", "hasidentityproviders": false, "identityproviders": [],
        "loginurl": "#", "signupurl": "#", "sitename": "Thinkera", "logintoken": "token",
        "togglepassword": true, "smallscreensonly": false
    }
}}
<div class="loginform tk-login">
    <h1 class="tk-auth-title">{{#str}}auth_welcome, theme_thinkera{{/str}}</h1>
    <p class="tk-auth-lead">{{#str}}auth_welcomelead, theme_thinkera{{/str}}</p>

    {{#maintenance}}<div class="alert alert-danger login-maintenance">{{{maintenance}}}</div>{{/maintenance}}
    {{#error}}
        <div class="alert alert-danger tk-auth-alert" id="loginerrormessage" role="alert">
            {{#errortitle}}<strong class="d-block mb-1">{{errortitle}}</strong>{{/errortitle}}{{error}}
        </div>
    {{/error}}
    {{#info}}<div class="alert alert-info tk-auth-alert" id="logininfomessage" role="status">{{info}}</div>{{/info}}

    {{#hasidentityproviders}}
    <div class="tk-auth-providers">
        {{#identityproviders}}
        <a class="tk-auth-provider" href="{{url}}">
            {{#iconurl}}<img src="{{iconurl}}" alt="" width="22" height="22">{{/iconurl}}
            {{#str}}loginwith, core, {{name}}{{/str}}
        </a>
        {{/identityproviders}}
    </div>
    {{#showloginform}}<div class="tk-auth-or"><span>{{#str}}auth_oremail, theme_thinkera{{/str}}</span></div>{{/showloginform}}
    {{/hasidentityproviders}}

    {{#showloginform}}
    <form class="login-form tk-auth-form" action="{{loginurl}}" method="post" id="login">
        <input id="anchor" type="hidden" name="anchor" value="">
        <script>document.getElementById('anchor').value = location.hash;</script>
        <input type="hidden" name="logintoken" value="{{logintoken}}">
        <div class="tk-field">
            <label for="username">{{#canloginbyemail}}{{#str}}auth_emailorusername, theme_thinkera{{/str}}{{/canloginbyemail}}{{^canloginbyemail}}{{#str}}username{{/str}}{{/canloginbyemail}}</label>
            <input type="text" name="username" id="username" class="form-control" value="{{username}}" dir="ltr"
                   autocomplete="username" autocapitalize="none" spellcheck="false" inputmode="email">
        </div>
        <div class="tk-field">
            <div class="tk-field-row">
                <label for="password">{{#str}}password{{/str}}</label>
                <a href="{{forgotpasswordurl}}">{{#str}}auth_forgot, theme_thinkera{{/str}}</a>
            </div>
            <input type="password" name="password" id="password" value="" class="form-control" dir="ltr" autocomplete="current-password">
        </div>
        {{#recaptcha}}<div class="login-form-recaptcha mb-3">{{{recaptcha}}}</div>{{/recaptcha}}
        <button class="tk-auth-submit" type="submit" id="loginbtn">{{#str}}auth_signinbutton, theme_thinkera{{/str}}</button>
    </form>
    {{/showloginform}}

    {{#cansignup}}
    <div class="tk-auth-new">
        <p>{{#str}}auth_new, theme_thinkera{{/str}}</p>
        <a class="tk-auth-secondary" href="{{signupurl}}">{{#str}}auth_createfree, theme_thinkera{{/str}}</a>
    </div>
    {{/cansignup}}

    {{#canloginasguest}}
    <form action="{{loginurl}}" method="post" id="guestlogin" class="mt-3">
        <input type="hidden" name="logintoken" value="{{logintoken}}">
        <input type="hidden" name="username" value="guest">
        <input type="hidden" name="password" value="guest">
        <button class="tk-auth-secondary" type="submit" id="loginguestbtn">{{#str}}loginasguest{{/str}}</button>
    </form>
    {{/canloginasguest}}
</div>
{{#js}}
    {{^error}}
        {{#autofocusform}}
            require(['core_form/events'], function(FormEvent) {
                function autoFocus() {
                    const userNameField = document.getElementById('username');
                    const passwordField = document.getElementById('password');
                    if (userNameField && userNameField.value.length == 0) {
                        userNameField.focus();
                    } else if (passwordField) {
                        passwordField.focus();
                    }
                }
                autoFocus();
                window.addEventListener(FormEvent.eventTypes.fieldStructureChanged, autoFocus);
            });
        {{/autofocusform}}
    {{/error}}
    require(['core/pending'], function(Pending) {
        const errorMessageDiv = document.getElementById('loginerrormessage');
        const infoMessageDiv = document.getElementById('logininfomessage');
        const errorMessage = errorMessageDiv?.textContent.trim();
        const infoMessage = infoMessageDiv?.textContent.trim();
        if (errorMessage || infoMessage) {
            const pendingJS = new Pending('login-move-focus');
            const usernameField = document.getElementById('username');
            setTimeout(function() {
                if (errorMessage && usernameField) {
                    usernameField.focus();
                }
                if (errorMessage) {
                    errorMessageDiv.innerHTML += "&nbsp;";
                }
                if (infoMessage) {
                    infoMessageDiv.innerHTML += "&nbsp;";
                }
                pendingJS.resolve();
            }, 500);
        }
    });
    {{#togglepassword}}
        require(['core/togglesensitive'], function(ToggleSensitive) {
            ToggleSensitive.init("password", {{smallscreensonly}});
        });
    {{/togglepassword}}
    require(['core_form/submit'], function(Submit) {
        Submit.init("loginbtn");
        {{#canloginasguest}}
            Submit.init("loginguestbtn");
        {{/canloginasguest}}
    });
{{/js}}