{{!
    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 theme_boost_magnific/login

    Login page template

    Example context (json):
    {
        "output": {
            "doctype": "<!DOCTYPE html>",
            "page_title": "Login page",
            "favicon": "favicon.ico",
            "main_content": "<h1>Headers keep HTML validators happy</h1>"
        }
    }
}}
{{> theme_boost_magnific/head }}

<body {{{bodyattributes}}}>
{{> core/local/toast/wrapper}}

<div id="page-wrapper" class="page-wrapper-login {{{login_theme}}}"
     style="--login-bg: url('{{{loginbackgroundimageurl}}}');">

    {{{ output.standard_top_of_body_html }}}

    <section class="login-wrapper">
        <div class="login-container">
            {{{ output.main_content }}}
            <script>
                (function () {
                    const block = document.querySelector(".login-form-password");
                    if (!block) {
                        return;
                    }

                    // 1) Label -> {{#str}} password {{/str}}
                    const label = block.querySelector('label[for="password"]');
                    if (label) {
                        label.textContent = "{{#str}} password {{/str}}";
                    }

                    // 2) Input password
                    const input = block.querySelector("#password");
                    if (!input) {
                        return;
                    }

                    // Placeholder -> {{#cleanstr}}password{{/cleanstr}}
                    input.setAttribute("placeholder", "{{#cleanstr}}password{{/cleanstr}}");

                    // 3) Criar (ou reaproveitar) a wrapper .password-wrapper
                    let wrapper = block.querySelector(".password-wrapper");
                    if (!wrapper) {
                        wrapper = document.createElement("div");
                        wrapper.className = "password-wrapper";
                        // Inserir a wrapper exatamente onde estava o input
                        input.parentNode.insertBefore(wrapper, input);
                    }

                    // Garantir que o input esteja dentro da wrapper
                    if (input.parentElement !== wrapper) {
                        wrapper.appendChild(input);
                    }

                    // 4) Criar o botão #togglePassword (se não existir)
                    let toggle = block.querySelector("#togglePassword");
                    if (!toggle) {
                        toggle = document.createElement("button");
                        toggle.type = "button";
                        toggle.id = "togglePassword";
                        toggle.className = "toggle-password";
                        toggle.title = "{{#str}} passwordunmaskrevealhint, form {{/str}}";
                        toggle.setAttribute("aria-pressed", "false");

                        const icon = document.createElement("i");
                        icon.className = "fa fa-eye";
                        icon.setAttribute("aria-hidden", "true");
                        toggle.appendChild(icon);

                        wrapper.appendChild(toggle);
                    }

                    // 5) Toggle show/hide (evita dupla ligação)
                    if (!toggle.dataset.bound) {
                        toggle.addEventListener("click", function () {
                            const isPassword = input.getAttribute("type") === "password";
                            input.setAttribute("type", isPassword ? "text" : "password");
                            toggle.setAttribute("aria-pressed", (!isPassword).toString());
                            toggle.classList.toggle("active", !isPassword);

                            const icon = toggle.querySelector("i");
                            if (isPassword) {
                                if (icon.classList.replace) {
                                    icon.classList.replace("fa-eye", "fa-eye-slash");
                                } else {
                                    icon.classList.remove("fa-eye");
                                    icon.classList.add("fa-eye-slash");
                                }
                            } else {
                                if (icon.classList.replace) {
                                    icon.classList.replace("fa-eye-slash", "fa-eye");
                                } else {
                                    icon.classList.remove("fa-eye-slash");
                                    icon.classList.add("fa-eye");
                                }
                            }
                        });
                        toggle.dataset.bound = "1";
                    }
                })();
            </script>
        </div>
    </section>
    <div class="loginfooter">
            <div class="language-menu">
                {{#languagemenu}}
                    <button class="language-menu__button" id="languageMenuBtn">
                        {{languagemenu.primary.title}}
                        <span class="arrow"></span>
                    </button>
                    <ul class="language-menu__list" id="languageMenuList">
                        {{#languagemenu.secondary.items}}
                            <li class="language-menu__item">
                                <a href="{{actionmenulink.url}}">
                                    {{actionmenulink.text}}
                                </a>
                            </li>
                        {{/languagemenu.secondary.items}}
                    </ul>
                    <script>
                        document.addEventListener("DOMContentLoaded", function () {
                            const btn = document.getElementById("languageMenuBtn");
                            const list = document.getElementById("languageMenuList");
                            const container = btn.closest(".language-menu");

                            btn.addEventListener("click", function (e) {
                                e.stopPropagation();
                                list.classList.toggle("show");
                                container.classList.toggle("open");
                            });

                            document.addEventListener("click", function () {
                                list.classList.remove("show");
                                container.classList.remove("open");
                            });
                        });
                    </script>
                {{/languagemenu}}
            </div>
            <p>
                {{#footer_show_copywriter}}
                    {{#str}}footer_copywriter,theme_boost_magnific{{/str}}
                    <a href="https://eduardokraus.com" target="_blank">Eduardo Kraus</a>
                {{/footer_show_copywriter}}
            </p>
    </div>
</div>

</body>
</html>
{{#js}}
    M.util.js_pending("theme_boost/loader");
    require(["theme_boost/loader"], function() {
        M.util.js_complete("theme_boost/loader");
    });
{{/js}}
