{{page-title "Secure Variables"}}
<section class="section">
  <div class="toolbar">
    <div class="toolbar-item">
      {{#if this.variables.length}}
        <SearchBox
          @searchTerm={{mut this.searchTerm}}
          @onChange={{action this.resetPagination}}
          @placeholder="Search variables..."
        />
      {{/if}}
    </div>
    <div class="toolbar-item is-right-aligned is-mobile-full-width">
      <div class="button-bar">
      {{#if (can "write variable" path="*")}}
        <LinkTo
          @route="variables.new"
          class="button is-primary"
          data-test-create-var
        >
          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"
          data-test-disabled-create-var
        >
          Create Secure Variable
        </button>
      {{/if}}

      </div>
    </div>
  </div>
  {{#if @model.variables.length}}
    <VariablePaths
      @branch={{this.model.pathTree.paths.root}}
    />
  {{else}}
    <div class="empty-message">
      <h3 data-test-empty-volumes-list-headline class="empty-message-headline">
        No Secure Variables
      </h3>
      <p class="empty-message-body">
        Get started by <LinkTo @route="variables.new">creating a new secure variable</LinkTo>
      </p>
    </div>
  {{/if}}
</section>