{{!
    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/>.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
}}
{{!
    @template core/user_menu

    Action link template.

    Context variables required for this template:
    * unauthenticateduseruser - (Optional) Items to be displayed if an an unautheticated user is accessing the site
        * content - The content to be displayed in the header.
        * url - The login url
    * items - Array of user menu items used in user_action_menu_items. Required if the above not provided.
    * metadata - Array of additional metadata to be displayed in the dropdown button.
    * avatardata - Array of avatars to be displayed. Usually only the current user's avatar. If viewing as another user,
        includes that user's avatar.
    * userfullname - The name of the logged in user
    * submenus - Array of submenus within the user menu.
      * id - The id of the submenu.
      * title - The title of the submenu.
      * items - Array of the submenu items used in core/user_action_menu_submenu_items.

    Example context (json):
    {
        "unauthenticateduser": {
            "content": "You are not logged in",
            "url": "https://yourmoodlesite/login/index.php"
        },
        "items": [],
        "metadata": [],
        "avatardata": [],
        "userfullname": "Admin User",
        "submenus": [
            {
                "id": "86cebd87",
                "title": "Submenu title",
                "items": []
            }
        ]
    }
}}
<div class="usermenu">
    {{#unauthenticateduser}}
        <span class="login">
            {{#guest}}
                {{#str}} loggedinasguest, core {{/str}}
                <div class="divider border-left h-75 align-self-center mx-2"></div>
            {{/guest}}
            {{#url}}
                <a href="{{url}}">{{#str}} login, core {{/str}}</a>
            {{/url}}

            {{#loginpopup}}
            <div class="dropdown">
                <a href="#" role="button" id="user-menu-toggle" data-toggle="dropdown" aria-label="{{#str}}usermenu{{/str}}" aria-haspopup="true" aria-controls="user-action-menu" class="nav-link p-0" title="Login {{#str}}usermenu{{/str}}">
                    <div class="remuiicon">
                        <i class="icon fa fa-user"></i>
                    </div>
                    {{#str}} login, core {{/str}}
                </a>

                <div class="dropdown-menu dropdown-menu-right loginddown p-p-6" role="menu" data-region="popover-region-container">
                    <div class="d-flex flex-column flex-gap-8">
                    <form class="login-form" action="{{loginurl}}" method="post" id="login">
                        <input type="hidden" name="logintoken" value="{{logintoken}}">
                        <div class="login-form-username form-group">
                            <label for="username" class="sr-only">
                                {{^canloginbyemail}}
                                    {{#str}} username {{/str}}
                                {{/canloginbyemail}}
                                {{#canloginbyemail}}
                                    {{#str}} usernameemail {{/str}}
                                {{/canloginbyemail}}
                            </label>
                            <label class="text-link-semibold " tabindex="-1">
                                {{^canloginbyemail}}
                                    {{#str}} username {{/str}}
                                {{/canloginbyemail}}
                                {{#canloginbyemail}}
                                    {{#str}} usernameemail {{/str}}
                                {{/canloginbyemail}}
                            </label>
                            <input type="text" name="username" id="username" {{!
                                !}}class="form-control" {{!
                                !}}value="{{username}}" {{!
                                !}}placeholder="{{^canloginbyemail}}{{#cleanstr}}username{{/cleanstr}}{{/canloginbyemail}}{{!
                                !}}{{#canloginbyemail}}{{#cleanstr}}usernameemail{{/cleanstr}}{{/canloginbyemail}}" {{!
                                !}}autocomplete="username">
                        </div>
                        <div class="login-form-password form-group">
                            <label for="password" class="sr-only">{{#str}} password {{/str}}</label>
                            <label class="text-link-semibold form-label-color" tabindex="-1">
                                {{#str}} password {{/str}}
                            </label>
                            <div class="position-relative password-field-eye">
                                <input type="password" name="password" id="password" value="" {{!
                                    !}}class="form-control" {{!
                                    !}}placeholder="{{#cleanstr}}password{{/cleanstr}}" {{!
                                    !}}autocomplete="current-password">
                                <span class="edw-icon edw-icon-Show show-password-icon"></span>
                            </div>
                        </div>
                        {{#recaptcha}}
                            <div class="login-form-recaptcha mb-3">
                                {{{recaptcha}}}
                            </div>
                        {{/recaptcha}}
                        <div class="login-form-forgotpassword form-group text-right small-info-semibold">
                            <a href="{{forgotpasswordurl}}">{{#str}}forgotaccount, theme_remui{{/str}}</a>
                        </div>
                        <div class="login-form-submit form-group">
                            <button class="btn btn-primary btn-lg btn-block" type="submit" id="loginbtn">{{#str}}login{{/str}}</button>
                        </div>
                    </form>
                    {{#hasauthmethods}}
                    <div class="login-identityproviders d-flex flex-column flex-gap-6">
                    <h2 class="login-heading text-align-middle h-semibold-6 m-0">{{#str}} potentialidps, theme_remui {{/str}}</h2>

                    <div class="login-identityprovider-btn-wrapper d-flex flex-gap-6 justify-content-center">
                    {{#authmethods}}
                        <a class="login-identityprovider-btn border-0" href="{{{url}}}" title="{{name}}">
                            {{#iconurl}}
                                <img src="{{iconurl}}" alt="" width="24" height="24" loading="lazy"/>
                            {{/iconurl}}
                        </a>
                    {{/authmethods}}
                    </div>
                    </div>
                    {{/hasauthmethods}}
                    </div>
                </div>
            </div>
            {{/loginpopup}}
        </span>
    {{/unauthenticateduser}}
    {{^unauthenticateduser}}
        <div class="dropdown show">
            <a href="#" role="button" id="user-menu-toggle" data-toggle="dropdown" aria-label="{{#str}}usermenu{{/str}}"
               aria-haspopup="true" aria-controls="user-action-menu" class="btn dropdown-toggle" title="{{#str}}usermenu{{/str}}">
                <span class="userbutton">
                    {{> core/user_menu_metadata }}
                </span>
            </a>
            <div id="user-action-menu" class="dropdown-menu dropdown-menu-right">
                <div id="usermenu-carousel" class="carousel slide" data-touch="false" data-interval="false" data-keyboard="false">
                    <div class="carousel-inner">
                        <div id="carousel-item-main" class="carousel-item active" role="menu" tabindex="-1" aria-label="{{#str}}user{{/str}}">
                            {{> core/user_action_menu_items }}
                        </div>
                        {{#submenus}}
                            <div id="carousel-item-{{id}}" class="carousel-item submenu" tabindex="-1" aria-label="{{title}}">
                                <div class="d-flex flex-column h-100">
                                    <div class="header">
                                        <button type="button" class="btn btn-icon carousel-navigation-link text-decoration-none text-body" data-carousel-target-id="carousel-item-main" aria-label="{{#str}}usermenugoback{{/str}}">
                                            <span class="dir-rtl-hide">{{#pix}}i/arrow-left{{/pix}}</span>
                                            <span class="dir-ltr-hide">{{#pix}}i/arrow-right{{/pix}}</span>
                                        </button>
                                        <span class="pl-2" id="carousel-item-title-{{id}}">{{title}}</span>
                                    </div>
                                    <div class="dropdown-divider"></div>
                                    <div class="items h-100 overflow-auto" role="menu" aria-labelledby="carousel-item-title-{{id}}">
                                        {{> core/user_action_menu_submenu_items }}
                                    </div>
                                </div>
                            </div>
                        {{/submenus}}
                    </div>
                </div>
            </div>
        </div>
    {{/unauthenticateduser}}
</div>
{{#js}}
    require(['core/usermenu'], function(UserMenu) {
        UserMenu.init();
    });
{{/js}}