[%-

USE HTTP;

# user - The cPanel user (or virtual user that is logged in)
# parameterized_form - A dump of the postdata that is uri encoded
# theme - The current cPanel theme that the user is using
# goto_uri - The uri that the user requested
SET query = {
    'user' => user,
    'theme' => theme,
    'parameterized_form' => parameterized_form,
};
IF page_to_show == 'token_denied';
    query.token_denied = 1;
END;

IF external_auth_modules.size > 0 && external_auth_modules

# Note: the variable "webpros_forced" is declared in the caller (e.g. token_denied.tmpl/login.tmpl) and defines whether we are forcing
# that app to login via Webpros Account.  In this template we need to remove the "-- or --" from the
# display.

%]
<div id="external-auth-container">
    <div class="or-separator"
         [% IF webpros_forced -%]
            style="display:none"
         [% END -%]
    >
        <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">
        [% FOR auth_mod = external_auth_modules %]
          [%
          IF webpros_forced && auth_mod.provider_name != "webpros";
            NEXT;
          END;
          IF oidc_failed == auth_mod.provider_name;
                # This must match use the same regex as unprotected/cpanel/js/login.js
                IF ENV_REQUEST_URI.match('^\/(?:logout|login|openid_connect_callback)\/?');
                    SET xauth_link = auth_mod.link.html();
                ELSE;
                    SET xauth_link = ENV_REQUEST_URI.html();
                END;
          ELSE;
            IF auth_mod.link.search('\?');
                SET xauth_link = auth_mod.link.html() _ '&' _ HTTP.make_query_string(query);
            ELSE;
                SET xauth_link = auth_mod.link.html() _ '?' _ HTTP.make_query_string(query);
            END;
          END; %]
          <div class="external-auth-btn">
              <a class="external-auth-link" href="[% xauth_link %]" title="[% auth_mod.label.html() %]" style="background-color:#[% auth_mod.color %];color:#[% auth_mod.textcolor %]" referrerpolicy="origin">
                  <i class="external-auth-icon" style="background-image:url(data:[% auth_mod.icon_type %];base64,[% auth_mod.icon %])"></i>
                  [% IF auth_mod.label == 'Log in via ' _ auth_mod.display_name %]
                    <span data-testid="external-auth-btn-localized" class="external-auth-btn-label">[% locale.maketext('Log in via [_1]', auth_mod.display_name.html()) %]</span>
                  [% ELSE %]
                    <span data-testid="external-auth-btn-label" class="external-auth-btn-label">[% auth_mod.label.html() %]</span>
                  [% END %]
              </a>
          </div>
        [% END %]
    </div>
</div>
<script>
    // Set goto_uri/app in JS so that it never gets cached server side.
    function setExtAuthLinks() {
        let ext_auth_links = document.querySelectorAll("a.external-auth-link");
        ext_auth_links.forEach((elem) => {
            if (elem.href.indexOf("?") === -1) {
                elem.href = elem.href + "?goto_uri=" + window.goto_uri + "&goto_app=" + window.goto_app;
            } else {
                elem.href = elem.href + "&goto_uri=" + window.goto_uri + "&goto_app=" + window.goto_app;
            }
        });
    }
	if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(setExtAuthLinks, 1);
    } else {
        document.addEventListener("DOMContentLoaded", setExtAuthLinks);
    }
</script>
[% END %]