{{#if this.replaceCA}}
  <MessageError @model={{this.model}} />
  <h2 data-test-title class="title is-3">
    {{#if this.needsConfig}}
      Configure CA Certificate
    {{else}}
      {{#if this.model.certificate}}
        Generated Certificate
      {{else}}
        Add CA Certificate
      {{/if}}
    {{/if}}
  </h2>
  {{#if (or this.model.certificate this.model.csr)}}
    {{#if (eq this.model.canParse false)}}
      <AlertBanner
        @type="info"
        @message="There was an error parsing the certificate's metadata. As a result, Vault cannot display the issue and expiration dates. This will not interfere with the certificate's functionality."
        data-test-warning
      />
    {{/if}}
    {{#each this.model.attrs as |attr|}}
      {{#if (and attr.options.masked (get this.model attr.name))}}
        <InfoTableRow
          data-test-table-row
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        >
          <MaskedInput @value={{get this.model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
        </InfoTableRow>
      {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
        <InfoTableRow
          data-test-table-row={{this.value}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a" isFormatted=true}}
        />
      {{else}}
        <InfoTableRow
          data-test-table-row={{this.value}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        />
      {{/if}}
    {{/each}}
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <CopyButton
          @clipboardText={{or this.model.certificate this.model.csr}}
          @class="button"
          @buttonType="button"
          @success={{action (set-flash-message (concat (if this.model.certificate "Certificate" "CSR") " copied!"))}}
        >
          Copy
          {{if this.model.certificate "Certificate" "CSR"}}
        </CopyButton>
      </div>
      <div class="control">
        <button data-test-back-button {{action "refresh"}} type="button" class="button">
          Back
        </button>
      </div>
    </div>
  {{else}}
    <form {{action "saveCA" on="submit"}} aria-label="ca form" data-test-generate-root-cert="true">
      <NamespaceReminder @mode="save" @noun="PKI change" />
      <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
      <div class="field is-grouped is-grouped-split box is-fullwidth is-bottomless">
        <div class="field is-grouped">
          <div class="control">
            <button
              data-test-submit
              type="submit"
              class="button is-primary {{if this.loading 'is-loading'}}"
              disabled={{this.loading}}
            >
              Save
            </button>
          </div>
          <div class="control">
            <button data-test-back-button {{action "toggleReplaceCA"}} type="button" class="button">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </form>
  {{/if}}
{{else if this.signIntermediate}}
  {{#if (or this.model.certificate)}}
    <AlertBanner
      @type="warning"
      @message="If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint."
      data-test-warning
    />
    {{#each this.model.attrs as |attr|}}
      {{#if (and attr.options.masked (get this.model attr.name))}}
        <InfoTableRow
          data-test-table-row={{this.value}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        >
          <MaskedInput @value={{get this.model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
        </InfoTableRow>
      {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
        <InfoTableRow
          data-test-table-row={{this.value}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a" isFormatted=true}}
        />
      {{else}}
        <InfoTableRow
          data-test-table-row={{this.value}}
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        />
      {{/if}}
    {{/each}}
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <CopyButton
          @clipboardText={{this.model.certificate}}
          @class="button"
          @buttonType="button"
          @success={{action (set-flash-message "Certificate copied!")}}
        >
          Copy Certificate
        </CopyButton>
      </div>
      <div class="control">
        <button data-test-back-button {{action "refresh"}} type="button" class="button">
          Back
        </button>
      </div>
    </div>
  {{else}}
    <h2 data-test-title class="title is-3">Sign intermediate</h2>
    <NamespaceReminder @mode="save" @noun="PKI change" />
    <MessageError @model={{this.model}} @errors={{this.errors}} />
    <form {{action "saveCA" on="submit"}} data-test-sign-intermediate-form="true" aria-label="sign intermediate form">
      <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
      <div class="field is-grouped box is-fullwidth is-bottomless">
        <div class="control">
          <button
            data-test-submit
            type="submit"
            class="button is-primary {{if this.loading 'is-loading'}}"
            disabled={{this.loading}}
          >
            Save
          </button>
        </div>
        <div class="control">
          <button {{action "toggleVal" "signIntermediate" false}} type="button" class="button">
            Cancel
          </button>
        </div>
      </div>
    </form>
  {{/if}}
{{else if this.setSignedIntermediate}}
  <h2 data-test-title class="title is-3">Set signed intermediate</h2>
  <NamespaceReminder @mode="save" @noun="PKI change" />
  <MessageError @model={{this.model}} />
  <p class="has-text-grey-dark">
    Submit a signed CA certificate corresponding to a generated private key.
  </p>
  <form
    {{action "saveCA" "setSignedIntermediate" on="submit"}}
    aria-label="set signed intermediate form"
    data-test-set-signed-intermediate-form="true"
  >
    <div class="field">
      <label for="certificate" class="is-label">
        Signed Intermediate Certificate
      </label>
      <div class="control">
        <Textarea
          data-test-signed-intermediate
          class="textarea"
          id="certificate"
          name="certificate"
          @value={{this.model.certificate}}
        />
      </div>
    </div>
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          data-test-submit
          type="submit"
          class="button is-primary {{if this.loading 'is-loading'}}"
          disabled={{this.loading}}
        >
          Save
        </button>
      </div>
      <div class="control">
        <button data-test-back-button {{action "toggleVal" "setSignedIntermediate" false}} type="button" class="button">
          Cancel
        </button>
      </div>
    </div>
  </form>
{{else}}
  <p class="has-text-grey-dark">
    This is the default CA certificate used in Vault. It is not used for self-signed certificates or if you have a signed
    intermediate CA certificate with a generated key.
  </p>
  {{#each this.downloadHrefs as |dl|}}
    <div class="box is-shadowless is-marginless is-fullwidth has-slim-padding">
      <ExternalLink @href={{dl.url}} @sameTab={{true}} download={{dl.name}} data-test-ca-download-link>
        {{dl.display}}
      </ExternalLink>
    </div>
  {{/each}}

  <div class="field is-grouped box is-fullwidth is-shadowless">
    <div class="control">
      <button data-test-go-replace-ca type="button" {{action "toggleReplaceCA"}} class="button">
        {{#if this.needsConfig}}
          Configure CA
        {{else}}
          Add CA
        {{/if}}
      </button>
    </div>
    {{#if this.config.pem}}
      <div class="control">
        <button data-test-go-sign-intermediate type="button" {{action "toggleVal" "signIntermediate"}} class="button">
          Sign intermediate
        </button>
      </div>
    {{/if}}
    <div class="control">
      <button
        data-test-go-set-signed-intermediate
        type="button"
        {{action "toggleVal" "setSignedIntermediate"}}
        class="button"
      >
        Set signed intermediate
      </button>
    </div>
    {{#unless this.needsConfig}}
      <div class="control">
        <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
          <T.Trigger data-test-tooltip-trigger tabindex="-1">
            <button type="button" class="button is-primary" disabled={{true}}>
              Delete
            </button>
          </T.Trigger>
          <T.Content @defaultClass="tool-tip smaller-font">
            <div class="box" data-test-hover-copy-tooltip-text>
              Deleting a CA is only available via the CLI and API.
              <DocLink @path="/api-docs/secret/pki#delete-issuer" class="doc-link-subtle">
                Learn more
              </DocLink>
            </div>
          </T.Content>
        </ToolTip>
      </div>
    {{/unless}}
  </div>
{{/if}}