<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div id="hAlign" class="display_always">
    <div id="vAlign">
        <!-- XXX this form submits to nowhere -->
        <form id="signUpForm" class="cf authform" novalidate>
            <h1 id="title"><%- gettext('Sign In') %></h1>

            <ul class="notifications">
                <li class="notification emailsent">
                  <h2><%- gettext('Confirm your email address') %></h2>

                  <p>
                    <%- format(gettext('Check your email at <strong %(emailId)></strong>.'), { emailId: 'id="sentToEmail"' }) %>
                  </p>

                  <p>
                    <%- gettext('Click the link in the confirmation email. You\'ll then immediately be signed into Persona.') %>
                  </p>
                </li>
            </ul>

            <ul class="inputs forminputs">
                <li>
                    <label for="email"><%- gettext('To sign in with Persona, please enter your email address.') %></label>
                    <input id="email" autofocus placeholder="<%- gettext('enter email address') %>" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="254" />

                    <div id="email_format" class="tooltip" for="email">
                      <%- gettext('This field must be an email address.') %>
                    </div>

                    <div id="email_required" class="tooltip" for="email">
                      <%- gettext('The email field is required.') %>
                    </div>

                    <div id="could_not_add" class="tooltip" for="email">
                      <%- gettext('We just sent an email to that address! If you really want to send another, wait a minute or two and try again.') %>
                    </div>

                    <div id="cannot_authenticate" class="tooltip" for="email">
                      <%- gettext('This email address and password do not match.') %>
                    </div>


                </li>

                <li class="password_entry vpassword_entry">
                    <a class="forgot right" href="/forgot"><%- gettext('forgot your password?') %></a>
                    <label for="password" class="password_entry"><%- gettext('Password') %></label>
                    <label for="password" class="vpassword_entry"><%- gettext('Your email address is new to us. Please create a password to use with Persona.') %></label>
                    <input id="password" placeholder="<%- gettext('password') %>" type="password" maxlength="80">

                    <div id="password_required" class="tooltip" for="password">
                      <%- gettext('The password field is required.') %>
                    </div>

                    <div class="tooltip" id="password_length" for="password">
                        <%- gettext('Password must be between 8 and 80 characters long.') %>
                    </div>

                    <div class="tooltip" id="passwords_no_match" for="password">
                      <%- gettext('These passwords don\'t match!') %>
                    </div>
                </li>

                <li class="vpassword_entry">
                    <label for="vpassword" class="hidden"><%- gettext('Verify Password') %></label>
                    <input id="vpassword" placeholder="<%- gettext('verify password') %>" type="password" maxlength="80">

                    <div id="password_required" class="tooltip" for="vpassword">
                      <%- gettext('Verification password is required.') %>
                    </div>


                </li>
            </ul>

            <div class="submit cf forminputs start">
                <button id="next"><%- gettext('Next') %></button>
            </div>

            <div class="submit cf forminputs password_entry">
                <button id="signIn"><%- gettext('Sign In') %></button>
            </div>

            <div class="submit cf forminputs vpassword_entry">
                <p class="cf">
                  <button id="verifyEmail"><%- gettext('Verify Email') %></button>
                </p>

                <p class="tospp cf">
                   <%- format(
                        gettext('By proceeding, you agree to %(persona)\'s <a %(termsLink)>Terms</a> and <a %(privacyLink)>Privacy Policy</a>.'),
                             { persona: "Persona",
                               termsLink: 'href="https://login.persona.org/tos" target="_new"',
                               privacyLink: 'href="https://login.persona.org/privacy" target="_new"',
                             }) %>
                  </p>

            </div>

            <div class="submit cf forminputs verify_primary">
              <%- format(gettext('To verify that you own <strong %(emailId)>this address</strong>, you must sign in with your provider. A new window will be opened.'),
                         { emailId: 'id="primary_email"' }) %>

              <p class="submit">
                <button id="authWithPrimary"><%- gettext('Verify') %></button>
              </p>
            </div>
        </form>
    </div>
</div>

<noscript>
  <%- gettext('We\'re sorry, Persona requires that Javascript is enabled.') %>
</noscript>