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

{{#if (eq @mode "create")}}
  <form
    class={{if @showAdvancedMode "advanced-edit" "simple-edit"}}
    {{on "submit" (fn this.createOrUpdateKey @mode)}}
    aria-label="secret create form"
    {{did-insert this.setup @secretData @mode}}
  >
    <div class="field box is-fullwidth is-sideless is-marginless">
      <NamespaceReminder @mode="create" @noun="secret" />
      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
      <label class="is-label" for="kv-key">Path for this secret</label>
      <p class="control is-expanded">
        <Input
          autocomplete="off"
          spellcheck="false"
          data-test-secret-path="true"
          id="kv-key"
          class="input {{if (get this.validationMessages 'path') 'has-error-border'}}"
          @value={{get @modelForData @modelForData.pathAttr}}
          {{on "keyup" (perform this.waitForKeyUp "path" value="target.value")}}
        />
      </p>
      {{#if (get this.validationMessages "path")}}
        <AlertInline @type="danger" @message={{capitalize (get this.validationMessages "path")}} class="has-top-padding-s" />
      {{/if}}
      {{#if @modelForData.isFolder}}
        <p class="help has-text-danger">
          The secret path may not end in
          <code>/</code>
        </p>
      {{/if}}
      {{#if this.pathWhiteSpaceWarning}}
        <Hds::Alert
          @type="inline"
          @color="warning"
          class="has-top-margin-m has-bottom-margin-s"
          data-test-whitespace-warning
          as |A|
        >
          <A.Title>Warning</A.Title>
          <A.Description>
            {{this.whitespaceWarning}}
          </A.Description>
        </Hds::Alert>
      {{/if}}
    </div>
    {{#if @showAdvancedMode}}
      <div class="form-section">
        <JsonEditor
          @title="Secret Data"
          @value={{this.codemirrorString}}
          @valueUpdated={{this.codemirrorUpdated}}
          @onFocusOut={{this.formatJSON}}
        />
      </div>
    {{else}}
      <div class="form-section">
        <label class="title is-5">
          Secret data
        </label>
        {{#each @secretData as |secret index|}}
          <div class="info-table-row">
            <div class="column is-one-quarter info-table-row-edit">
              <Input
                data-test-secret-key={{true}}
                @value={{secret.name}}
                placeholder="key"
                {{on "change" this.handleChange}}
                class="input"
                autocomplete="off"
                spellcheck="false"
              />
            </div>
            <div class="column info-table-row-edit">
              <MaskedInput
                @name={{secret.name}}
                @onChange={{fn this.handleMaskedInputChange secret index}}
                @value={{secret.value}}
                data-test-secret-value="true"
              />
            </div>
            <div class="column is-narrow info-table-row-edit">
              {{#if (eq @secretData.length (inc index))}}
                <Hds::Button @text="Add" @color="secondary" {{on "click" this.addRow}} data-test-secret-add-row="true" />
              {{else}}
                <Hds::Button
                  @text="Delete row"
                  @icon="trash"
                  @isIconOnly={{true}}
                  @color="secondary"
                  {{on "click" (fn this.deleteRow secret.name)}}
                />
              {{/if}}
            </div>
          </div>
          {{#if this.validationMessages.key}}
            <AlertInline @type="danger" @message={{this.validationMessages.key}} class="has-top-padding-s" />
          {{/if}}
        {{/each}}
      </div>
    {{/if}}

    <div class="field is-grouped box is-fullwidth is-bottomless">
      <Hds::ButtonSet>
        <Hds::Button @text="Save" type="submit" disabled={{@buttonDisabled}} data-test-secret-save={{true}} />
        {{#if @model.path}}
          <Hds::Button
            @text="Cancel"
            @color="secondary"
            @route="vault.cluster.secrets.backend.list"
            @model={{@model.path}}
          />
        {{else}}
          <Hds::Button @text="Cancel" @color="secondary" @route="vault.cluster.secrets.backend.list-root" />
        {{/if}}
      </Hds::ButtonSet>
    </div>
  </form>
{{/if}}

{{#if (eq @mode "edit")}}
  <form
    {{on "submit" (fn this.createOrUpdateKey "edit")}}
    aria-label="secret edit form"
    {{did-insert this.setup @secretData @mode}}
  >
    <div class="box is-sideless is-fullwidth is-marginless padding-top">
      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
      <NamespaceReminder @mode="edit" @noun="secret" />
      {{#if (eq @canReadSecret false)}}
        <Hds::Alert @type="inline" @color="warning" class="has-bottom-margin-s" as |A|>
          <A.Title>Warning</A.Title>
          <A.Description>
            <ul class={{if (eq @canReadSecret false) "bullet"}}>
              {{#if (eq @canReadSecret false)}}
                <li data-test-warning-no-read-permissions>
                  You do not have read permissions. If a secret exists at this path creating a new secret will overwrite it.
                </li>
              {{/if}}
            </ul>
          </A.Description>
        </Hds::Alert>
      {{/if}}
      {{#if @showAdvancedMode}}
        <div class="form-section">
          <JsonEditor
            @title="Secret Data"
            @value={{this.codemirrorString}}
            @valueUpdated={{this.codemirrorUpdated}}
            @onFocusOut={{this.formatJSON}}
          />
        </div>
      {{else}}
        <div class="form-section">
          <label class="title is-5">
            Secret data
          </label>
          {{#each @secretData as |secret index|}}
            <div class="columns is-variable has-no-shadow">
              <div class="column is-one-quarter">
                <Input
                  data-test-secret-key={{true}}
                  @value={{secret.name}}
                  placeholder="key"
                  {{on "change" this.handleChange}}
                  class="input"
                  autocomplete="off"
                  spellcheck="false"
                />
              </div>
              <div class="column">
                <MaskedInput
                  @name={{secret.name}}
                  @onChange={{fn this.handleMaskedInputChange secret index}}
                  @value={{secret.value}}
                  data-test-secret-value="true"
                />
              </div>
              <div class="column is-narrow">
                {{#if (eq @secretData.length (inc index))}}
                  <Hds::Button @text="Add" @color="secondary" {{on "click" this.addRow}} data-test-secret-add-row="true" />
                {{else}}
                  <Hds::Button
                    @text="Delete row"
                    @icon="trash"
                    @isIconOnly={{true}}
                    @color="secondary"
                    {{on "click" (fn this.deleteRow secret.name)}}
                  />
                {{/if}}
              </div>
            </div>
          {{/each}}
        </div>
      {{/if}}
    </div>
    <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
      <div class="field is-grouped">
        <Hds::ButtonSet>
          <Hds::Button
            @text="Save"
            data-test-secret-save
            type="submit"
            disabled={{or @buttonDisabled this.validationErrorCount}}
          />
          <Hds::Button
            @text="Cancel"
            @color="secondary"
            @route="vault.cluster.secrets.backend.show"
            @model={{@model.id}}
            @query={{hash version=@modelForData.version}}
          />
        </Hds::ButtonSet>
      </div>
    </div>
  </form>
{{/if}}