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

<PageHeader as |p|>
  <p.top>
    <KeyValueHeader
      @baseKey={{hash display=this.model.id id=this.model.idForNav}}
      @path="vault.cluster.secrets.backend.list"
      @mode={{this.mode}}
      @root={{this.root}}
      @showCurrent={{true}}
    />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3" data-test-secret-header="true">
      {{#if (eq this.mode "create")}}
        Create Alphabet
      {{else if (eq this.mode "edit")}}
        Edit Alphabet
      {{else}}
        Alphabet
        <code>{{this.model.id}}</code>
      {{/if}}
    </h1>
  </p.levelLeft>
</PageHeader>

{{#if (eq this.mode "show")}}
  <Toolbar>
    <ToolbarActions>
      {{#if this.capabilities.canDelete}}
        <Hds::Button
          @text="Delete alphabet"
          @color="secondary"
          class="toolbar-button"
          {{on "click" (action "delete")}}
          data-test-transformation-alphabet-delete
        />
        <div class="toolbar-separator"></div>
      {{/if}}
      {{#if this.capabilities.canUpdate}}
        <ToolbarSecretLink
          @secret={{concat this.model.idPrefix this.model.id}}
          @mode="edit"
          data-test-edit-link={{true}}
          @replace={{true}}
        >
          Edit alphabet
        </ToolbarSecretLink>
      {{/if}}
    </ToolbarActions>
  </Toolbar>
{{/if}}

{{#if (or (eq this.mode "edit") (eq this.mode "create"))}}
  <form onsubmit={{action "createOrUpdate" this.mode}}>
    <div class="box is-sideless is-fullwidth is-marginless">
      <MessageError @model={{this.model}} />
      <NamespaceReminder @mode={{this.mode}} @noun="transform alphabet" />
      {{#each this.model.attrs as |attr|}}
        {{#if (and (eq attr.name "name") (eq this.mode "edit"))}}
          <label for={{attr.name}} class="is-label">
            {{attr.options.label}}
          </label>
          {{#if attr.options.subText}}
            <p class="sub-text">{{attr.options.subText}}</p>
          {{/if}}
          <input
            data-test-input={{attr.name}}
            id={{attr.name}}
            autocomplete="off"
            spellcheck="false"
            value={{or (get this.model attr.name) this.model.id}}
            readonly
            class="field input is-readOnly"
            type={{attr.type}}
          />
        {{else}}
          <FormField data-test-field @attr={{attr}} @model={{this.model}} />
        {{/if}}
      {{/each}}
    </div>
    <div class="field is-grouped-split box is-fullwidth is-bottomless">
      <Hds::ButtonSet>
        <Hds::Button
          @text={{if (eq this.mode "create") "Create alphabet" "Save"}}
          type="submit"
          data-test-alphabet-transform-create
        />
        {{#if (eq this.mode "create")}}
          <Hds::Button
            @text="Cancel"
            @color="secondary"
            @route="vault.cluster.secrets.backend.list-root"
            @model={{this.model.backend}}
            @query={{hash tab="alphabet"}}
          />
        {{else}}
          <Hds::Button
            @text="Cancel"
            @color="secondary"
            @route="vault.cluster.secrets.backend.show"
            @models={{array this.model.backend (concat "alphabet/" this.model.id)}}
            @query={{hash tab="alphabet"}}
          />
        {{/if}}
      </Hds::ButtonSet>
    </div>
  </form>
{{else}}
  {{#if this.model.displayErrors}}
    <div class="has-top-margin-s">
      <MessageError @model={{this.model}} />
    </div>
  {{/if}}
  <div class="box is-fullwidth is-sideless is-paddingless is-marginless">
    {{#each this.model.attrs as |attr|}}
      {{#if (eq attr.type "object")}}
        <InfoTableRow
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{stringify (get this.model attr.name)}}
        />
      {{else if (eq attr.type "array")}}
        <InfoTableRow
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
          @type={{attr.type}}
          @isLink={{eq attr.name "transformations"}}
        />
      {{else}}
        <InfoTableRow
          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
          @value={{get this.model attr.name}}
        />
      {{/if}}
    {{/each}}
  </div>
{{/if}}