{{#if @model.serialNumber}}
  <Page::PkiCertificateDetails @model={{@model}} @onRevoke={{this.cancel}} @onBack={{this.cancel}} />
{{else}}
  <form {{on "submit" (perform this.save)}} data-test-pki-generate-cert-form>
    <div class="box is-bottomless is-fullwidth is-marginless">
      <MessageError @errorMessage={{this.errorBanner}} />
      <NamespaceReminder @mode="create" @noun="certificate" />
      {{#let (get @model.formFieldGroups "0") as |defaultGroup|}}
        {{#each defaultGroup.default as |attr|}}
          <FormField @model={{@model}} @attr={{attr}} @modelValidations={{this.modelValidations}}>
            <PkiNotValidAfterForm @attr={{attr}} @model={{@model}} />
          </FormField>
        {{/each}}
      {{/let}}
      <FormFieldGroups
        @model={{@model}}
        @mode="create"
        @renderGroup="Subject Alternative Name (SAN) Options"
        @groupName="formFieldGroups"
      />
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          class="button is-primary {{if this.save.isRunning 'is-loading'}}"
          disabled={{this.save.isRunning}}
          data-test-pki-generate-button
        >
          {{capitalize this.verb}}
        </button>
        <button
          type="button"
          class="button has-left-margin-s"
          disabled={{this.save.isRunning}}
          {{on "click" this.cancel}}
          data-test-pki-generate-cancel
        >
          Cancel
        </button>
      </div>
      {{#if this.invalidFormAlert}}
        <div class="control" data-test-alert>
          <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
        </div>
      {{/if}}
    </div>
  </form>
{{/if}}