[%

    #----------------------------------------------------------------------
    # Arguments received by this template:
    # This list may not be exhaustive, and other parameters may be added or available.
    #
    # allow_login_autocomplete - Boolean for autocompleting login names
    # app_name - What application is loading this interface (cpaneld, whostmgrd, webmaild)
    # goto_uri - The uri that the user requested
    # goto_app - App the user is attempting to log in to.
    # display_locales - Boolean for if the interface display the locales list
    # https - Is the application running in https mode
    # login_messages - Messages to present to the user pertaining to the login process
    # logout - Boolean of whether to display the login button
    # msg_code - Key for what we are currently doing in the login display (link_account, etc)
    # reset_pass - should be true if either resetpass or resetpass_sub is enabled (doesn't have to be both)

USE DataURI;
USE JSON;
USE Wbr;

SET disp_apps = {
    'whostmgrd' => 'WHM',
    'webmaild' => 'Webmail',
    'cpaneld' => 'cPanel',
};
SET disp_app  = disp_apps.item(app_name) || 'cPanel';

SET app_images = {
    'whostmgrd' => 'whm-logo_white.svg',
    'webmaild'  => 'webmail-logo.svg',
    'cpaneld'   => 'cpanel-logo.svg',
};

# get app modules based on $app_name
SET app_image = app_images.$app_name || app_images.cpaneld;
SET app_image = MagicRevision(get_theme_url("images/" _ app_image));

#If msg_code is 'link_account' we already have a separate display notice so don't need to show it twice
SET shownotice = logout || msg_code;
SET shownotice = msg_code == 'link_account' ? 0 : shownotice;
SET shownotice = msg_code == 'max_users_exceeded' ? 0 : shownotice;
SET notice_message = msg_code
    ? (login_messages.$msg_code || locale.maketext('An authorization error occurred. Please try again.') )
    : locale.maketext('You have logged out.');

SET login_target = (goto_uri=='/') ? '_top' : '_self';

#Windows XP doesn't have the fancy arrows, so use ellipsis for now.
SET more_locales_symbol = "…";

# Only run the display_locales function once by saving it into all_display_locales
SET all_display_locales = display_locales;

PROCESS "templates/external_auth_header.tmpl";

SET login_classes = [];
IF reset_pass;
    login_classes.push('has-pw-reset');
END;
UNLESS external_auth_modules;
    login_classes.push('no-external-auth-modules');
END;

SET notice_style_ = logout ? 'success-notice' : notice_style ? notice_style : 'error-notice';

-%]

[% MACRO ceil(n)
    GET n + (n - (n % (n + 1)) > 0 ? 1 : 0) FILTER format("%d");
%]

<input type="hidden" id="goto_uri" value="[% goto_uri.html() %]" />
<input type="hidden" id="goto_app" value="[% goto_app.html() %]" />
<!-- Do not remove msg_code as it is needed for automated testing - msg_code:[[%- msg_code -%]]  -->
<div id="login-wrapper" class="group [% login_classes.join(' ') %]">
    <div class="wrapper">
    <div id="notify">
        <noscript>
            <div class="error-notice">
                <img src="[% MagicRevision(get_theme_url('images/notice-error.png')) %]" alt="Error" align="left"/>
                [% locale.maketext('JavaScript is disabled in your browser.') %]
                [% locale.maketext('For [_1] to function properly, you must enable JavaScript.', disp_app) %]
                [% locale.maketext('If you do not enable JavaScript, certain features in [_1] will not function correctly.', disp_app) %]
            </div>
            </noscript>
        [% IF msg_code == 'link_account' %]
        <div id="link-account">
            <div class="content-wrapper">
                [% IF user_info_payload.picture %]
                  [% IF user_info_payload.picture.match('https://') %]
                    <span class='link-account-avatar' style="background-size: 100% 100%; background-image:url([% user_info_payload.picture.html() %])"></span>
                  [% ELSE %]
                    <span class='link-account-avatar' style="background-image:url('data:image/*;base64,[% user_info_payload.picture %]')"></span>
                  [% END %]
                [% END %]
                [% IF existing_link_count %]
                  [% locale.maketext('Your account “[_1]” is already associated with an existing “[_2]” account. Please log in to connect a new account.' , preferred_username , disp_app); %]
                [% ELSE %]
                  [% locale.maketext('Your account “[_1]” is not associated with an existing “[_2]” account. Please log in to connect the account.' , preferred_username , disp_app); %]
                [% END %]
            </div>
        </div>
        [% END %]
        [% IF msg_code == 'max_users_exceeded' %]
        <div id='login-status' class="[% notice_style_ %]">
            <div class="content-wrapper">
                <div id="login-detail">
                    <div id="login-status-icon-container"><span class='login-status-icon'></span></div>
                    <div id="login-status-message">
                        <p><strong>[% locale.maketext('Maximum Users Exceeded.') %]</strong></p>
                        <p>[% locale.maketext('The number of users on the server exceeds the maximum number of allowed users for your host server.') %]</p>
                        <p>[% locale.maketext('For more information, contact your server administrator.') %]</p>
                    </div>
                </div>
            </div>
        </div>
        [% END %]
        <div id='login-status' class="[% notice_style_ %]" style="visibility: [% shownotice ? 'visible' : 'hidden' %]">
            <div class="content-wrapper">
                <div id="login-detail">
                    <div id="login-status-icon-container"><span class='login-status-icon'></span></div>
                    <div id="login-status-message">[% notice_message %]</div>
                </div>
            </div>
        </div>
    </div>

    <div style="display:none">
        <div id="locale-container" style="visibility:hidden">
            <div id="locale-inner-container">
                <div id="locale-header">
                    <div class="locale-head">[% locale.maketext('Please select a locale:') %]</div>
                    <div class="close"><a href="javascript:void(0)" onclick="toggle_locales(false)">X [% locale.maketext('Close') %]</a></div>
                </div>
                <div id="locale-map">
                    <div class="scroller clear">
                        [% FOREACH cur_loc = all_display_locales %]
                            <div class="locale-cell"><a href="?locale=[% cur_loc.tag %]">[% cur_loc.name %]</a></div>
                        [% END %]
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="content-container">
        <div id="login-container">

            <div id="login-sub-container">
                    <div id="login-sub-header">
                        [% IF script_uri == "/cpsess0/scripts7/authorizesupport" %]
                        <img class="small-logo" src="[% app_image %]" alt="logo" />
                        &mdash;
                        [% locale.maketext('To grant [asis,cPanel] Support access to your server, log in to [asis,WHM] and click the “[_1]” button.', locale.maketext('Grant Access')) %]
                        </p>
                        [% ELSE %]
                        <img class="main-logo" src="[% app_image %]" alt="logo" />
                        [% END %]
                    </div>
                    <div id="login-sub"
                        [% IF linked_users && linked_users.size -%]
                            style="display:none"
                        [% END -%]
                        >
                        <div id="clickthrough_form" style="visibility:hidden">
                            <form action="javascript:void(0)">
                                <div class="notices"></div>
                                <button type="submit" class="clickthrough-cont-btn">[% locale.maketext('Continue') -%]</button>
                            </form>
                        </div>
                        <div id="forms">
[%# Don't change the form action or the ids/names of the username and password fields.
    Doing so will break browser-native login credential storage.
-%]
                            <form novalidate id="login_form" action="/login/" method="post" target="[% login_target %]" style="visibility:[% linked_users.size ? 'hidden' : '' %]">
                                <div class="input-req-login"><label for="user">[% IF app_name=="webmaild" %][% locale.maketext('Email Address') %][% ELSE %][% locale.maketext('Username') %][% END %]</label></div>
                                <div class="input-field-login icon username-container">
                                    <input name="user" id="user" autofocus="autofocus" value="[% user.html() %]" placeholder="[% IF app_name=="webmaild" %][% locale.maketext('Enter your email address.') %][% ELSE %][% locale.maketext('Enter your username.') %][% END %]" class="std_textbox" type="text" [% allow_login_autocomplete ? '' : 'autocomplete="off"' %] tabindex="1" required>
                                </div>
                                <div class="input-req-login login-password-field-label"><label for="pass">[% locale.maketext('Password') %]</label></div>
                                <div class="input-field-login icon password-container">
                                    <input name="pass" id="pass" placeholder="[% IF app_name=="webmaild" %][% locale.maketext('Enter your email password.') %][% ELSE %][% locale.maketext('Enter your account password.') %][% END %]" class="std_textbox" type="password" tabindex="2" [% allow_login_autocomplete ? '' : 'autocomplete="off"' %] required>
                                </div>
                                <div class="controls">
                                    <div class="login-btn">
                                        <button name="login" type="submit" id="login_submit" tabindex="3">[% locale.maketext('Log in') -%]</button>
                                    </div>

                                    [% IF reset_pass;
                                         SET reset_url = "/resetpass?start=1";
                                         IF !https;
                                            USE ApplicationUrl;
                                            SET secure_url = ApplicationUrl.get_secure_url(
                                                        host            => SERVER_NAME,
                                                        port            => SERVER_PORT,
                                                        proxysubdomains => cpconf.proxysubdomains);
                                            reset_url = secure_url _ reset_url;
                                        END;
                                        -%]
                                        <div class="reset-pw">
                                            <a href="[% reset_url %]" id="reset_password">[% locale.maketext('Reset Password') %]
                                            </a>
                                        </div>
                                    [% END -%]
                                </div>
                                <div class="clear" id="push"></div>
                            </form>
                        <!--CLOSE forms -->
                        </div>
                    <!--CLOSE login-sub -->
                    </div>
                    [% PROCESS "templates/external_auth.tmpl" %]
                    [% IF linked_users.size -%]
                        <div id="select_users_option_block" style="display:none">
                            <div class="or-separator" >
                                <span class="or-separator-label">[% locale.maketext('OR[comment,this is a decoration separator, shortest form is best]') %]</span>
                                <span class="or-separator-secondary-label">[% locale.maketext("Log in via"); %]</span>
                            </div>
                            <div class="controls external-auth-items">
                                <div class="btn">
                                    <button type="button" class="external-auth-select" style="background-color:#[% auth_mod.color %];text-color:#[% auth_mod.textcolor %]" onclick="show_select_user()">
                                        <span class="external-auth-btn-label">[% locale.maketext('Select user from list of linked accounts') %]</span>
                                    </button>
                                  </div>
                            </div>
                        </div>
                    [% END -%]
                <!--CLOSE wrapper -->
                </div>
            <!--CLOSE login-sub-container -->
            </div>
        <!--CLOSE login-container -->
        </div>
        [% #If we have multiple users the user must select one %]
        [% IF linked_users.size -%]
            [% #calculate left postion based on # of items with a max width of 6 %]
            [% SET max_width = linked_users.size < 6 ? ( linked_users.size + 1 ) * 100 : 600; %]
            <form id="select_user_form" novalidate>
                <div>
                [% FOREACH user IN linked_users -%]
                    <div class="button-wrapper">
                        <button name="openid_user_selection" type="submit" id="login_submit" tabindex="3" value="[% user.username %]" title="[% user.username %]">
                            <div class="image-wrapper">
                                <img src="https://gravatar.com/avatar/[% user.md5_hex %]?d=retro"
                                    onerror="if (this.src != '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]') this.src = '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]';"></img>
                            </div>
                            <div class="text-wrapper">
                                <div class="text-content">
                                    [% Wbr.wbr_on_at_symbol(user.username) %]
                                </div>
                            </div>
                        </button>
                    </div>
                [% END -%]
                    <div class="button-wrapper" >
                        <button name="openid_user_selection" type="button" id="login_submit" tabindex="3" onclick="show_login()">
                            <div class="image-wrapper">
                                <img src="https://gravatar.com/avatar/default_no_image?d=mm"
                                    onerror="if (this.src != '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]') this.src = '[% MagicRevision(get_theme_url('images/default-avatar.png')) %]';"></img>
                            </div>
                            <div class="text-wrapper">
                                <div class="link-extra-account">
                                    [% locale.maketext('Link Another Account') %]
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
                <div class="clear" id="push"></div>
            </form>
        [% END -%]
        <div id="locale-footer">
            <div class="locale-container">
                <noscript>
                    <form method="get" action=".">
                        <select name="locale">
                            <option value="">[% locale.maketext('Change locale') %]</option>
                            [% "<option value='${cur_loc.tag}'>${cur_loc.name}</option>" FOR cur_loc=all_display_locales -%]
                        </select>
                        <button style="margin-left: 10px" type="submit">[% locale.maketext('Change') %]</button>
                    </form>
                    <style type="text/css">#mobilelocalemenu, #locales_list {display:none}</style>
                </noscript>
                <ul id="locales_list">
                    [% FOREACH cur_loc = all_display_locales %]
                        [% LAST IF loop.index > 7 %]
                        <li><a href="/?locale=[% cur_loc.tag %]">[% cur_loc.name.replace(' ','&nbsp;') %]</a></li>
                    [% END %]
                    <li><a href="javascript:void(0)" id="morelocale" onclick="toggle_locales(true)" title="[% locale.maketext('More locales') %]">[% more_locales_symbol %]</a></li>
                </ul>
                <div id="mobilelocalemenu">[% locale.maketext("Select a locale:") %]
                    <a href="javascript:void(0)" onclick="toggle_locales(true)" title="[% locale.maketext('Change locale') %]">[% locale.get_language_tag_name() %]</a>
                </div>
            </div>
        </div>
    </div>
<!--Close login-wrapper -->
</div>
<script>
    var MESSAGES = [% JSON.stringify(login_messages) -%];

    window.IS_LOGOUT = [% logout ? 'true' : 'false' %];

[%# Must not include external javascript -jnk 06.20.09 -%]
[%
FOR file = ['login.js', 'jstz.min.js', 'cptimezone_optimized.js'];
    SET js_url = get_theme_url("js-min/$file") || get_theme_url("js/$file");
    IF js_url;
        js_url = js_url.replace('^/','');
        "\n//$file\n";
        INSERT "$js_url";
    END;
END;
-%]
[% IF linked_users && linked_users.size %]
    var rows = [% ceil(linked_users.size / 6) %];
[% END %]

CPTimezone.reset_timezone();
</script>

<style>
    @media (min-width: 481px) {
        #select_user_form {
            width: [% max_width %]px;
        }
    }
</style>