{{page-title "Secure Variables"}}
<section class="section">
  {{#if this.isForbidden}}
    <ForbiddenMessage />
  {{else}}
    <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 "create variable" namespace=this.qpNamespace)}}
          <LinkTo
            @route="variables.new"
            @query={{hash namespace=this.qpNamespace}}
            data-test-run-job
            class="button is-primary"
          >
            Create Secure Variable
          </LinkTo>
        {{else}}
          <button
            data-test-run-job
            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 @model.variables.length}}
      <ListTable data-test-eval-table @source={{@model.variables}} as |t|>
        <t.head>
          <th>
            Path
          </th>
          <th>
            Namespace
          </th>
        </t.head>
        <t.body as |row|>
          <tr {{on "click" (fn this.goToVariable row.model)}}>
            <td>
              {{row.model.path}}
            </td>
            <td>
              {{row.model.namespace}}
            </td>
          </tr>
        </t.body>
      </ListTable>
    {{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}}
  {{/if}}
</section>