<div id="main-content" class="card confirm-{{#isSignUp}}signup{{/isSignUp}}{{#isSignIn}}signin{{/isSignIn}}">
  <header>
    {{#isSignUp}}
        <h1 id="fxa-confirm-header">{{#t}}Confirm your account{{/t}}</h1>
      {{/isSignUp}}
    {{#isSignIn}}
    <h1 id="fxa-confirm-signin-header">{{#t}}Confirm this sign-in{{/t}}</h1>
    {{/isSignIn}}
  </header>

  <section>
    <div class="error"></div>
    <div class="success"></div>

    <div class="graphic graphic-mail"></div>

    {{#isSignUp}}
      <p class="verification-email-message">{{#unsafeTranslate}}Check your email for the confirmation link sent&nbsp;to %(escapedEmail)s{{/unsafeTranslate}}</p>
    {{/isSignUp}}
    {{#isSignIn}}
    <p class="verification-email-message">{{#unsafeTranslate}}Check your email for the sign-in confirmation link sent to %(escapedEmail)s{{/unsafeTranslate}}</p>
    {{/isSignIn}}

    {{#isOpenWebmailButtonVisible}}
      <div class="button-row">
        <a href="{{{ escapedWebmailLink }}}" data-webmail-type="{{webmailType}}" class="button primary-button" target="_blank" id="open-webmail" type="button">{{webmailButtonText}}</a>
      </div>
    {{/isOpenWebmailButtonVisible}}

    <div class="links">
      {{^canGoBack}}
        <a id="resend" class="delayed-fadein" href="#">{{#t}}Not in inbox or spam folder? Resend{{/t}}</a>
      {{/canGoBack}}
      {{#canGoBack}}
        <a id="resend" class="left delayed-fadein" href="#">{{#t}}Not in inbox or spam folder? Resend{{/t}}</a>
        <a id="back" class="right delayed-fadein" href="#">{{#t}}Back{{/t}}</a>
      {{/canGoBack}}
    </div>
  </section>
</div>
