{{page-title "Secure Variables: " this.absolutePath}}
{{#each this.breadcrumbs as |crumb|}}
  <Breadcrumb @crumb={{crumb}} />
{{/each}}
  <section class="section">
    <div class="toolbar">
      <div class="toolbar-item is-right-aligned is-mobile-full-width">
        {{#if this.namespaceOptions}}
          <SingleSelectDropdown
            data-test-variable-namespace-filter
            @label="Namespace"
            @options={{this.namespaceOptions}}
            @selection={{this.namespaceSelection}}
            @onSelect={{this.setNamespace}}
          />
        {{/if}}
        <div class="button-bar">
          {{#if (can "write variable" path=(concat this.absolutePath "/") namespace=this.namespaceSelection)}}
            <LinkTo
              @route="variables.new"
              @query={{hash path=(concat this.absolutePath "/")}}
              class="button is-primary"
            >
              Create Secure Variable
            </LinkTo>
          {{else}}
            <button
              class="button is-primary is-disabled tooltip is-right-aligned"
              aria-label="You don’t have sufficient permissions"
              disabled
              type="button"
            >
              Create Secure Variable
            </button>
          {{/if}}
        </div>
      </div>
    </div>
    {{#if this.isForbidden}}
      <ForbiddenMessage />
    {{else}}
      {{#if this.model.treeAtPath}}
        <VariablePaths
          @branch={{this.model.treeAtPath}}
        />
      {{else}}
        <div class="empty-message">
          {{#if (eq this.namespaceSelection "*")}}
            <h3 data-test-empty-variables-list-headline class="empty-message-headline">
              Path /{{this.absolutePath}} contains no variables
            </h3>
            <p class="empty-message-body">
              To get started, <LinkTo @route="variables.new" @query={{hash path=(concat this.absolutePath "/")}}>create a new secure variable here</LinkTo>, or <LinkTo @route="variables">go back to the Secure Variables root directory</LinkTo>.
            </p>
          {{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>