{{#if this.replaceCA}}
  <MessageError @model={{this.model}} />
  <h2 data-test-title class="title is-3">
    {{#if this.needsConfig}}
      Configure CA Certificate
    {{else}}
      Replace CA Certificate
    {{/if}}
  </h2>
  {{#if (or this.model.certificate this.model.csr)}}
    {{#if (not (eq this.model.canParse true))}}
      <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 attr.options.masked}}
        <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"}} data-test-generate-root-cert="true">
      <NamespaceReminder @mode="save" @noun="PKI change" />
      {{#if this.model.uploadPemBundle}}
        <AlertBanner
          @type="warning"
          @message="If you have already set a certificate and key, they will be overridden with the successful saving of a new PEM bundle."
          data-test-warning
        />
      {{/if}}
      <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 class="control">
          {{#if this.model.canDeleteRoot}}
            <ConfirmAction
              @buttonClasses="button"
              @confirmTitle="Delete this CA key?"
              @confirmMessage="This CA certificate will still be available for reading until a new certificate/key is generated or uploaded."
              @onConfirmAction={{action "deleteCA"}}
            >
              Delete
            </ConfirmAction>
          {{/if}}
        </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 attr.options.masked}}
        <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}} />
    <form {{action "saveCA" on="submit"}} data-test-sign-intermediate-form="true">
      <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"}} 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">
      <a data-test-ca-download-link href={{dl.url}} download={{dl.name}}>
        {{dl.display}}
      </a>
    </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}}
          Replace 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>
  </div>
{{/if}}