{{!
    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_form/element-passwordunmask

    Moodle passwordunmask form element template.

    The purpose of this template is to render a passwordunmask form element.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Context variables required for this template:
    * element
        * id
        * name
        * value
        * size

    Example context (json):
    {
        "element": {
            "id": "example_password_unmask",
            "name": "example",
            "value": "Password1!",
            "size": 40
        }
    }

}}
{{< core_form/element-template }}
    {{$ element }}
        <div id="form-password-eye-{{{uniqid}}}">
            <div class="d-flex align-items-center">
                <input type="password"
                       id="{{{element.id}}}"
                       value="{{{element.value}}}"
                       class="form-control {{#error}}is-invalid{{/error}}"
                       placeholder="**********"
                       data-size="{{{element.size}}}"
                       {{#element.frozen }} readonly {{/element.frozen}}
                       {{^element.hardfrozen}} name="{{{element.name}}}" {{/element.hardfrozen}}
                       {{#error }} autofocus aria-describedby="{{{element.iderror}}}" {{/error}}
                       {{#required}} aria-required="true" {{/required}}
                       {{{element.attributes}}}>
                <button type="button"
                        id="form-password-eye-{{{uniqid}}}"
                        class="btn btn-outline-secondary toggle-password h-100 ms-2"
                        tabindex="-1"
                        aria-label="{{#str}} passwordunmaskrevealhint, form {{/str}}">
                    <i class="fa fa-eye"></i>
                </button>
            </div>
        </div>
        <script>
            document.getElementById("form-password-eye-{{{uniqid}}}").addEventListener("click", function (e) {
                if (e.target.closest(".toggle-password")) {
                    const btn = e.target.closest(".toggle-password");
                    const input = btn.parentElement.querySelector("input");
                    const icon = btn.querySelector("i");

                    if (input.type === "password") {
                        input.type = "text";
                        icon.classList.remove("fa-eye");
                        icon.classList.remove("fa-eye");
                        icon.classList.add("fa-eye-slash");
                        btn.classList.remove("btn-outline-secondary")
                        btn.classList.add("btn-secondary");
                        btn.setAttribute("aria-label", "{{#str}} hide {{/str}}");
                    } else {
                        input.type = "password";
                        icon.classList.remove("fa-eye-slash");
                        icon.classList.add("fa-eye");
                        btn.classList.remove("btn-secondary");
                        btn.classList.add("btn-outline-secondary")
                        btn.setAttribute("aria-label", "{{#str}} passwordunmaskrevealhint, form {{/str}}");
                    }
                }
            });
        </script>
    {{/ element }}
{{/ core_form/element-template }}

