{{#if (eq @mode "create")}}
  <form
    class={{if @showAdvancedMode "advanced-edit" "simple-edit"}}
    onsubmit={{action "createOrUpdateKey" @mode}}
    aria-label="secret create form"
    {{did-insert this.setup @secretData @model @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={{get this.validationMessages "path"}}
          @paddingTop={{true}}
          @isMarginless={{true}}
        />
      {{/if}}
      {{#if @modelForData.isFolder}}
        <p class="help is-danger">
          The secret path may not end in
          <code>/</code>
        </p>
      {{/if}}
      {{#if this.pathWhiteSpaceWarning}}
        <div class="has-top-margin-m">
          <AlertBanner
            @type="warning"
            @message="Your secret path contains whitespace. If this is desired, you'll need to encode it with %20 in API calls."
            @marginTop={{true}}
            data-test-whitespace-warning
          />
        </div>
      {{/if}}
    </div>
    {{#if @showAdvancedMode}}
      <div class="form-section">
        <JsonEditor
          @title={{if @isV2 "Version Data" "Secret Data"}}
          @value={{this.codemirrorString}}
          @valueUpdated={{action "codemirrorUpdated"}}
          @onFocusOut={{action "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" (action "handleChange")}}
                class="input"
                autocomplete="off"
                spellcheck="false"
              />
            </div>
            <div class="column info-table-row-edit">
              <MaskedInput
                @name={{secret.name}}
                @onKeyDown={{action "handleKeyDown"}}
                @onChange={{action "handleChange"}}
                @value={{secret.value}}
                data-test-secret-value="true"
              />
            </div>
            <div class="column is-narrow info-table-row-edit">
              {{#if (eq @secretData.length (inc index))}}
                <button
                  type="button"
                  {{action "addRow"}}
                  class="button is-outlined is-primary"
                  data-test-secret-add-row="true"
                >
                  Add
                </button>
              {{else}}
                <button
                  class="button has-text-grey is-expanded is-icon"
                  type="button"
                  {{on "click" (fn this.deleteRow secret.name)}}
                  aria-label="Delete row"
                >
                  <Icon @name="trash" class="has-text-grey-light" />
                </button>
              {{/if}}
            </div>
          </div>
          {{#if this.validationMessages.key}}
            <AlertInline
              @type="danger"
              @message={{this.validationMessages.key}}
              @paddingTop={{true}}
              @isMarginless={{true}}
            />
          {{/if}}
        {{/each}}
      </div>
    {{/if}}
    {{! must have UPDATE permissions to add secret metadata. Create only will not work }}
    {{#if (and @isV2 @canUpdateSecretMetadata)}}
      <ToggleButton
        @isOpen={{this.showMetadata}}
        @openLabel="Hide secret metadata"
        @closedLabel="Show secret metadata"
        @onClick={{fn (mut this.showMetadata)}}
        class="is-block"
        data-test-show-metadata-toggle
      />
      {{#if this.showMetadata}}
        <SecretEditMetadata
          @model={{@model}}
          @mode="create"
          @updateValidationErrorCount={{action "updateValidationErrorCount"}}
        />
      {{/if}}
    {{/if}}
    <div class="field is-grouped box is-fullwidth is-bottomless">
      <div class="control">
        <button
          type="submit"
          disabled={{or @buttonDisabled this.validationErrorCount this.error}}
          class="button is-primary"
          data-test-secret-save={{true}}
        >
          Save
        </button>
      </div>
      <div class="control">
        <SecretLink @mode="list" @secret={{@model.parentKey}} class="button">
          Cancel
        </SecretLink>
      </div>
    </div>
  </form>
{{/if}}

{{#if (eq @mode "edit")}}
  {{! no metadata option because metadata is version agnostic }}
  <form
    onsubmit={{action "createOrUpdateKey" "edit"}}
    aria-label="secret edit form"
    {{did-insert this.setup @secretData @model @mode}}
  >
    <div class="box is-sideless is-fullwidth is-marginless padding-top">
      <MessageError @model={{@modelForData}} @errorMessage={{this.error}} />
      {{#if (eq @canReadSecretData false)}}
        <AlertBanner
          @type="warning"
          @message="You do not have read permissions. If a secret exists here creating a new secret will overwrite it."
          data-test-warning-no-read-permissions
        />
      {{/if}}
      <NamespaceReminder @mode="edit" @noun="secret" />
      {{#if this.isCreateNewVersionFromOldVersion}}
        <div class="form-section">
          <AlertBanner
            @type="warning"
            @class="is-marginless"
            @message="You are creating a new version based on data from Version {{@model.selectedVersion.version}}. The current version for {{@model.id}} is Version {{@model.currentVersion}}."
          />
        </div>
      {{/if}}
      {{#if @showAdvancedMode}}
        <div class="form-section">
          <JsonEditor
            @title={{if @isV2 "Version Data" "Secret Data"}}
            @value={{this.codemirrorString}}
            @valueUpdated={{action "codemirrorUpdated"}}
            @onFocusOut={{action "formatJSON"}}
          />
        </div>
      {{else}}
        <div class="form-section">
          <label class="title is-5">
            {{#if @isV2}}
              Version data
            {{else}}
              Secret data
            {{/if}}
          </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" (action "handleChange")}}
                  class="input"
                  autocomplete="off"
                  spellcheck="false"
                />
              </div>
              <div class="column">
                <MaskedInput
                  @name={{secret.name}}
                  @onKeyDown={{action "handleKeyDown"}}
                  @onChange={{action "handleChange"}}
                  @value={{secret.value}}
                  data-test-secret-value="true"
                />
              </div>
              <div class="column is-narrow">
                {{#if (eq @secretData.length (inc index))}}
                  <button
                    type="button"
                    {{action "addRow"}}
                    class="button is-outlined is-primary"
                    data-test-secret-add-row="true"
                  >
                    Add
                  </button>
                {{else}}
                  <button
                    class="button has-text-grey is-expanded is-icon"
                    type="button"
                    {{action "deleteRow" secret.name}}
                    aria-label="Delete row"
                  >
                    <Icon @name="trash" class="has-text-grey-light" />
                  </button>
                {{/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">
        <div class="control">
          <button
            data-test-secret-save
            type="submit"
            disabled={{or @buttonDisabled this.validationErrorCount}}
            class="button is-primary"
          >
            Save
          </button>
        </div>
        <div class="control">
          <SecretLink @mode="show" @secret={{@model.id}} @queryParams={{hash version=@modelForData.version}} class="button">
            Cancel
          </SecretLink>
        </div>
      </div>
    </div>
  </form>
{{/if}}