import { sync } from '@genesislcap/foundation-utils';
import { html } from '@microsoft/fast-element';
import { backButton } from '../base';
export const VerifyTemplate = html `
  <login-background>
    <div class="container">
      <zero-card class="card-pd">
        <div class="column-content">
          <login-logo></login-logo>
          <div class="heading2">Verify that it's you</div>
          <div class="heading3">
            We've sent a code to the email address attached to this account.
          </div>
        </div>
        <form @submit=${(x) => x.onSubmit()}>
          <zero-text-field
            type="text"
            name="code"
            autocomplete="one-time-code"
            :value=${sync((x) => x.code)}
            autofocus
            data-test-id="code"
          >
            <span class="form-title">Verification Code</span>
          </zero-text-field>
          <div class="form-buttons">
            <submit-button
              is-submitting="${(x) => x.isSubmitting}"
              label="Verify and Login"
            ></submit-button>
            ${backButton((x) => x.onBack())}
          </div>
          <login-message message="${(x) => x.message}"></login-message>
        </form>
      </zero-card>
    </div>
  </login-background>
`;
//# sourceMappingURL=verify.template.js.map