login.underscore

<div class="js-form-feedback" aria-live="assertive" tabindex="-1">
</div>

<% if ( context.createAccountOption !== false && !context.syncLearnerProfileData && !(context.enterpriseName && context.currentProvider) ) { %>
<div class="toggle-form">
    <span class="text"><%- gettext("First time here?") %></span>
    <a href="#login" class="form-toggle" data-type="register"><%- gettext("Create an Account.") %></a>
</div>
<% } %>

<% // Hide SSO related messages if we are not in the SSO pipeline.  %>
<% if (context.enterpriseName && context.currentProvider) { %>
    <% if (context.pipelineUserDetails && context.pipelineUserDetails.email) { %>
        <h2><%- gettext("Sign in to continue learning as {email}").replace("{email}", context.pipelineUserDetails.email) %></h2>
    <% } else { %>
        <h2><%- gettext("Sign in to continue learning") %></h2>
    <% } %>
    <p>
        <%- gettext("You already have an edX account with your {enterprise_name} email address.").replace(/{enterprise_name}/g, context.enterpriseName) %>
        <% if (context.syncLearnerProfileData) {
            %><%- gettext("Going forward, your account information will be updated and maintained by {enterprise_name}.").replace(/{enterprise_name}/g, context.enterpriseName) %>
        <% } %>
        <%- gettext("You can view your information or unlink from {enterprise_name} anytime in your Account Settings.").replace(/{enterprise_name}/g, context.enterpriseName) %>
    </p>
    <p><%- gettext("To continue learning with this account, sign in below.") %></p>
<% } else { %>
    <h2><%- gettext("Sign In") %></h2>
<% } %>

<form id="login" class="login-form" tabindex="-1" method="POST">

    <p class="sr">
        <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
            <%- gettext("Sign in here using your email address and password, or use one of the providers listed below.") %>
        <% } else { %>
            <%- gettext("Sign in here using your email address and password.") %>
        <% } %>
        <%- gettext("If you do not yet have an account, use the button below to register.") %>
    </p>

    <%= context.fields %>

    <button type="submit" class="action action-primary action-update js-login login-button"><%- gettext("Sign in") %></button>

    <% if ( context.providers.length > 0 && !context.currentProvider || context.hasSecondaryProviders ) { %>
    <div class="login-providers">
        <div class="section-title lines">
            <h3>
                <span class="text"><%- gettext("or sign in with") %></span>
            </h3>
        </div>

        <% _.each( context.providers, function( provider ) {
            if ( provider.loginUrl ) { %>
                <button type="button" class="button button-primary button-<%- provider.id %> login-provider login-<%- provider.id %>" data-provider-url="<%- provider.loginUrl %>">
                    <div class="icon <% if ( provider.iconClass ) { %>fa <%- provider.iconClass %><% } %>" aria-hidden="true">
                        <% if ( provider.iconImage ) { %>
                            <img class="icon-image" src="<%- provider.iconImage %>" alt="<%- provider.name %> icon" />
                        <% } %>
                    </div>
                    <span aria-hidden="true"><%- provider.name %></span>
                    <span class="sr"><%- _.sprintf( gettext("Sign in with %(providerName)s"), {providerName: provider.name} ) %></span>
                </button>
            <% }
        }); %>

        <% if ( context.hasSecondaryProviders ) { %>
            <button type="button" class="button-secondary-login form-toggle" data-type="institution_login">
                <%- gettext("Use my institution/campus credentials") %>
            </button>
        <% } %>
    </div>
    <% } %>
</form>