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

<KvPageHeader @breadcrumbs={{@breadcrumbs}} @pageTitle="Create Secret">
  <:toolbarFilters>
    <Toggle @name="json" @checked={{this.showJsonView}} @onChange={{fn (mut this.showJsonView)}}>
      <span class="has-text-grey">JSON</span>
    </Toggle>
  </:toolbarFilters>
</KvPageHeader>

<form {{on "submit" (perform this.save)}}>
  <div class="box is-sideless is-fullwidth is-bottomless">
    <NamespaceReminder @mode="create" @noun="secret" />
    <MessageError @errorMessage={{this.errorMessage}} />

    <KvDataFields
      @showJson={{this.showJsonView}}
      @secret={{@secret}}
      @modelValidations={{this.modelValidations}}
      @pathValidations={{this.pathValidations}}
      @type="create"
    />

    <ToggleButton
      @isOpen={{this.showMetadata}}
      @openLabel="Hide secret metadata"
      @closedLabel="Show secret metadata"
      @onClick={{fn (mut this.showMetadata)}}
      class="is-block"
      data-test-metadata-toggle
    />
    {{#if this.showMetadata}}
      <div class="box has-container" data-test-metadata-section>
        <KvMetadataFields @metadata={{@metadata}} @modelValidations={{this.modelValidations}} />
      </div>
    {{/if}}
  </div>
  <div class="box is-fullwidth is-bottomless">
    <div class="control">
      <Hds::Button
        @text="Save"
        @icon={{if this.save.isRunning "loading"}}
        type="submit"
        disabled={{this.save.isRunning}}
        data-test-kv-save
      />
      <Hds::Button
        @text="Cancel"
        @color="secondary"
        class="has-left-margin-s"
        disabled={{this.save.isRunning}}
        {{on "click" this.onCancel}}
        data-test-kv-cancel
      />
    </div>
    {{#if this.invalidFormAlert}}
      <AlertInline
        data-test-invalid-form-alert
        class="has-top-padding-s"
        @type="danger"
        @message={{this.invalidFormAlert}}
      />
    {{/if}}
  </div>
</form>