import { html } from '@microsoft/fast-element';
import { sync } from '@genesislcap/foundation-utils';
import { backButton, emailField, organisationField, password2Field, passwordField, usernameField, } from '../base';
export const RequestAccountTemplate = html `
  <login-background>
    <div class="container">
      <zero-card class="card-pd">
        <div class="column-content">
          <login-logo></login-logo>
          <div class="heading2">Request Account</div>
        </div>
        <form @submit=${(x) => x.onSubmit()}>
          ${organisationField()} ${usernameField()} ${emailField()} ${passwordField()}
          ${password2Field('confirmation')}
          <zero-checkbox
            name="terms"
            :value=${sync((x) => x.termsAgreed, 'boolean')}
            data-test-id="terms"
          >
            I agree to the
            <stong>Terms</stong>
            and
            <stong>Conditions</stong>
          </zero-checkbox>
          <div class="form-buttons">
            <submit-button
              is-submitting="${(x) => x.isSubmitting}"
              label="Request Account"
            ></submit-button>
            ${backButton((x) => x.onBack())}
          </div>
          <login-message message="${(x) => x.message}"></login-message>
        </form>
      </zero-card>
    </div>
  </login-background>
`;
//# sourceMappingURL=request-account.template.js.map