<section class="header">
  <h3>
    <span class="right-divider">API &amp; Keys for &quot;{{project.displayName}}&quot; Environment</span>
    <button class="btn btn-sm btn-primary right-divider-btn" {{action "newApikey"}}>Add API Key</button>
  </h3>
</section>

<section class="well">
  <label>Endpoint</label>
  <div>
    <a href="{{endpointWithAuth}}" target="_blank">{{displayEndpoint}}</a>
  </div>
</section>

<section class="well">
  <table class="grid fixed" style="margin-bottom: 0">
    <thead>
      <tr>
        {{sortable-th sortable=this action="changeSort" name="state" width="120"}}
        {{sortable-th sortable=this action="changeSort" name="name"}}
        {{sortable-th sortable=this action="changeSort" name="description"}}
        {{sortable-th sortable=this action="changeSort" name="publicValue" label="Username"}}
        {{sortable-th sortable=this action="changeSort" name="created"}}
        <th width="50">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {{#each arranged as |key|}}
        {{apikey-row model=key}}
      {{else}}
        <tr><td colspan="6" class="text-center text-muted">You don't have any API keys yet.</td></tr>
      {{/each}}
    </tbody>
  </table>
</section>
