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

<h1 class="variable-title title with-flex">
  <div>
    <FlightIcon @name="file-text" />
    {{this.model.path}}
    <Toggle
      {{keyboard-shortcut 
        label="Toggle View (JSON/List)"
        pattern=(array "j")
        action=(action this.toggleView)
      }}
      data-test-memory-toggle
      @isActive={{eq this.view "json"}}
      @onToggle={{action this.toggleView}}
      title="JSON"
    >JSON</Toggle>
  </div>
  <div>
    {{#unless this.isDeleting}}
      {{#if (can "write variable" path=this.model.path namespace=this.model.namespace)}}
      <div class="two-step-button">
        <LinkTo
          {{autofocus}}
          data-test-edit-button
          class="button is-info is-inverted is-small"
          @model={{this.model}}
          @route="variables.variable.edit"
          @query={{hash view=this.view}}
        >
          Edit
        </LinkTo>
      </div>
      {{/if}}
    {{/unless}}
    {{#if (can "destroy variable" path=this.model.path namespace=this.model.namespace)}}
      <TwoStepButton
        data-test-delete-button
        @alignRight={{true}}
        @idleText="Delete"
        @cancelText="Cancel"
        @confirmText="Yes, delete"
        @confirmationMessage="Are you sure you want to delete this variable and all its items?"
        @awaitingConfirmation={{this.deleteVariableFile.isRunning}}
        @onConfirm={{perform this.deleteVariableFile}}
        @onPrompt={{this.onDeletePrompt}}
        @onCancel={{this.onDeleteCancel}}
      />
    {{/if}}
  </div>
</h1>

{{#if this.shouldShowLinkedEntities}}
  <VariableForm::RelatedEntities
    @job={{this.model.pathLinkedEntities.job}}
    @group={{this.model.pathLinkedEntities.group}}
    @task={{this.model.pathLinkedEntities.task}}
    @namespace={{this.model.namespace}}
  />
{{/if}}

{{#if (eq this.view "json")}}
  <div class="boxed-section">
    <div class="boxed-section-head">
      Key/Value Data
      <CopyButton
        class="pull-right"
        @compact={{true}}
        @border={{true}}
        @clipboardText={{stringify-object this.model.items}}
          />
    </div>
    <div class="boxed-section-body is-full-bleed">
      <JsonViewer @json={{this.model.items}} />
    </div>
  </div>
{{else}}
  <ListTable class="variable-items" @source={{this.sortedKeyValues}} @sortProperty={{this.sortProperty}} @sortDescending={{this.sortDescending}} as |t|>
    <t.head>
      <t.sort-by @prop="key">Key</t.sort-by>
      <t.sort-by @prop="value">Value</t.sort-by>
    </t.head>
    <t.body as |row|>
      <tr data-test-var={{row.model.key}}>
        <td>
          {{row.model.key}}
        </td>
        <td colspan="3" class="value-cell">
          <div>
            <CopyButton
              @compact={{true}}
              @clipboardText={{row.model.value}}
            />
            <button
              class="show-hide-values button is-borderless is-compact"
              type="button"
              {{on "click" (action this.toggleRowVisibility row.model)}}
              {{keyboard-shortcut 
                label="Toggle Variable Visibility"
                pattern=(array "v")
                action=(action this.toggleRowVisibility row.model)
              }}

            >
              <FlightIcon
                @name={{if row.model.isVisible "eye" "eye-off"}}
                @title={{if row.model.isVisible "Hide Value" "Show Value"}}
              />
            </button>

            {{#if row.model.isVisible}}
              <code>{{row.model.value}}</code>
            {{else}}
              ********
            {{/if}}
          </div>
        </td>
      </tr>
    </t.body>
  </ListTable>
{{/if}}