{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.top>
    <Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-page-title>
      {{if @newRootModel.id "View Issuer Certificate" "Generate New Root"}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if @newRootModel.id}}
  <Toolbar aria-label="manu for managing PKI certificate">
    <ToolbarActions aria-label="actions for managing PKI certificate">
      <ToolbarLink
        @route="issuers.issuer.cross-sign"
        @type="pen-tool"
        @models={{array @newRootModel.backend @newRootModel.issuerId}}
        data-test-pki-issuer-cross-sign
      >
        Cross-sign issuers
      </ToolbarLink>
      <ToolbarLink
        @route="issuers.issuer.sign"
        @type="pen-tool"
        @models={{array @newRootModel.backend @newRootModel.issuerId}}
        data-test-pki-issuer-sign-int
      >
        Sign Intermediate
      </ToolbarLink>
      <BasicDropdown
        @class="popup-menu"
        @horizontalPosition="auto-right"
        @verticalPosition="below"
        @renderInPlace={{true}}
        as |D|
      >
        <D.Trigger
          data-test-popup-menu-trigger
          class={{concat "toolbar-link" (if D.isOpen " is-active")}}
          @htmlTag="button"
          data-test-issuer-download
        >
          Download
          <Chevron @direction="down" @isButton={{true}} />
        </D.Trigger>
        <D.Content @defaultClass="popup-menu-content">
          <nav class="box menu" aria-label="snapshots actions">
            <ul class="menu-list">
              <li>
                <DownloadButton
                  class="link"
                  @filename={{@newRootModel.issuerId}}
                  @extension="pem"
                  @fetchData={{fn this.fetchDataForDownload "pem"}}
                  data-test-issuer-download-type="pem"
                  @text="PEM format"
                  @hideIcon={{true}}
                />
              </li>
              <li>
                <DownloadButton
                  class="link"
                  @filename={{@newRootModel.issuerId}}
                  @extension="der"
                  @fetchData={{fn this.fetchDataForDownload "der"}}
                  data-test-issuer-download-type="der"
                  @text="DER format"
                  @hideIcon={{true}}
                />
              </li>
            </ul>
          </nav>
        </D.Content>
      </BasicDropdown>
      <ToolbarLink
        @route="issuers.issuer.edit"
        @models={{array @newRootModel.backend @newRootModel.issuerId}}
        data-test-pki-issuer-configure
      >
        Configure
      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>
{{/if}}

{{#if @newRootModel.id}}
  <div class="has-top-margin-m">
    <Hds::Alert data-test-rotate-next-steps @type="inline" @color="highlight" class="has-bottom-margin-s" as |A|>
      <A.Title>Next steps</A.Title>
      <A.Description>
        Your new root has been generated.
        {{#if @newRootModel.privateKey}}
          Make sure to copy and save the
          <code>private_key</code>
          as it is only available once.
        {{/if}}
        If you’re ready, you can begin cross-signing issuers now. If not, the option to cross-sign is available when you use
        this certificate.
      </A.Description>
      <A.LinkStandalone
        @icon="arrow-right"
        @iconPosition="trailing"
        @text="Cross-sign issuers"
        @route="issuers.issuer.cross-sign"
        @models={{array @newRootModel.backend @newRootModel.issuerId}}
      />

    </Hds::Alert>
  </div>
{{else}}
  <div class="box is-bottomless is-marginless is-flex-start">
    {{#each this.generateOptions as |option|}}
      <RadioCard
        class="has-fixed-width"
        @title={{option.label}}
        @description={{option.description}}
        @icon={{option.icon}}
        @value={{option.key}}
        @groupValue={{this.displayedForm}}
        @onChange={{fn (mut this.displayedForm) option.key}}
        data-test-radio={{option.key}}
      />
    {{/each}}
  </div>
{{/if}}

{{#if (eq this.displayedForm "use-old-settings")}}
  {{#if @newRootModel.id}}
    <PkiInfoTableRows @model={{@newRootModel}} @displayFields={{this.displayFields}} />
    <ParsedCertificateInfoRows @model={{@newRootModel.parsedCertificate}} />
    <div class="field is-grouped is-fullwidth has-top-margin-l has-bottom-margin-s">
      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
    </div>
  {{else}}
    {{!  USE OLD SETTINGS FORM INPUTS  }}
    <h2 class="title is-size-5 has-border-bottom-light page-header">
      Root parameters
    </h2>
    <form {{on "submit" (perform this.save)}} data-test-pki-rotate-old-settings-form>
      {{#if @parsingErrors}}
        <Hds::Alert data-test-parsing-warning @type="inline" @color="warning" class="has-bottom-margin-s" as |A|>
          <A.Title>Not all of the certificate values can be parsed and transferred to a new root</A.Title>
          <A.Description>{{@parsingErrors}}</A.Description>
        </Hds::Alert>
      {{/if}}
      {{#if this.alertBanner}}
        <Hds::Alert data-test-rotate-error @type="inline" @color="critical" class="has-bottom-margin-s" as |A|>
          <A.Title>Error</A.Title>
          <A.Description>{{this.alertBanner}}</A.Description>
        </Hds::Alert>
      {{/if}}
      {{#let (find-by "name" "commonName" @newRootModel.allFields) as |attr|}}
        <FormField @attr={{attr}} @model={{@newRootModel}} @modelValidations={{this.modelValidations}} />
      {{/let}}
      {{#let (find-by "name" "issuerName" @newRootModel.allFields) as |attr|}}
        <FormField @attr={{attr}} @model={{@newRootModel}} @modelValidations={{this.modelValidations}} />
      {{/let}}
      <div class="box has-slim-padding is-shadowless">
        <ToggleButton
          data-test-details-toggle
          @closedLabel="Old root settings"
          @openLabel="Hide old root settings"
          @isOpen={{this.showOldSettings}}
          @onClick={{fn (mut this.showOldSettings)}}
        />
        {{#if this.showOldSettings}}
          <PkiInfoTableRows @model={{@oldRoot}} @displayFields={{this.displayFields}} />
          <ParsedCertificateInfoRows @model={{@oldRoot.parsedCertificate}} />
        {{/if}}
      </div>

      <hr class="has-background-gray-100" />
      <Hds::ButtonSet>
        <Hds::Button @text="Done" type="submit" data-test-save />
        <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onCancel}} data-test-cancel />
      </Hds::ButtonSet>
      {{#if this.invalidFormAlert}}
        <div class="control">
          <AlertInline
            @type="danger"
            class="has-top-padding-s"
            @message={{this.invalidFormAlert}}
            data-test-pki-rotate-root-validation-error
          />
        </div>
      {{/if}}
    </form>
  {{/if}}
{{else}}
  <PkiGenerateRoot
    @model={{@newRootModel}}
    @onCancel={{@onCancel}}
    @onComplete={{@onComplete}}
    @adapterOptions={{hash actionType="rotate-root"}}
  />
{{/if}}