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

{{page-title "Variables"}}
<section class="section">

  <Hds::PageHeader class="variable-title" as |PH|>
    <PH.Actions>
        {{#if this.namespaceOptions}}
          <Hds::Dropdown data-test-variable-namespace-filter as |dd|>
            <dd.ToggleButton @text="Namespace ({{this.namespaceSelection}})" @color="secondary" />
            {{#each this.namespaceOptions as |option|}}
              <dd.Radio
                name={{option.key}}
                {{on "change" (action this.setNamespace option.key)}}
                checked={{eq this.namespaceSelection option.key}}
              >
                {{option.label}}
              </dd.Radio>
            {{/each}}
          </Hds::Dropdown>
        {{/if}}

        {{#if (can "write variable" path="*" namespace="*")}}
          <div
            {{keyboard-shortcut
              pattern=(array "n" "v")
              action=(action this.goToNewVariable)
              label="Create Variable"
            }}
          >
            <Hds::Button
              @text="Create Variable"
              @icon="plus"
              @route="variables.new"
              data-test-create-var
            />
          </div>
        {{else}}
          <Hds::Button
            @text="Create Variable"
            @icon="plus"
            data-test-disabled-create-var
            disabled
          />
        {{/if}}
    </PH.Actions>
  </Hds::PageHeader>

  {{#if this.isForbidden}}
    <ForbiddenMessage />
  {{else}}
    {{#if this.hasVariables}}
      <VariablePaths
        @branch={{this.root}}
      />
    {{else}}
      <div class="empty-message">
        {{#if (eq this.namespaceSelection "*")}}
          <h3 data-test-empty-variables-list-headline class="empty-message-headline">
            No Variables
          </h3>
          {{#if (can "write variable" path="*" namespace=this.namespaceSelection)}}
            <p class="empty-message-body">
              Get started by <LinkTo @route="variables.new">creating a new variable</LinkTo>
            </p>
          {{/if}}
        {{else}}
          <h3 data-test-no-matching-variables-list-headline class="empty-message-headline">
            No Matches
          </h3>
          <p class="empty-message-body">
            No paths or variables match the namespace
            <strong>
              {{this.namespaceSelection}}
            </strong>
          </p>
        {{/if}}
      </div>
    {{/if}}
  {{/if}}
</section>
