<app-header
  *ngIf="serviceAccount$ | async as serviceAccount"
  [title]="serviceAccount.name"
  icon="bwi-wrench"
>
  <bit-breadcrumbs slot="breadcrumbs">
    <bit-breadcrumb [route]="['..']" icon="bwi-angle-left">{{
      "machineAccounts" | i18n
    }}</bit-breadcrumb>
  </bit-breadcrumbs>
  <sm-new-menu></sm-new-menu>
  <bit-tab-nav-bar label="Main" slot="tabs">
    <bit-tab-link [route]="['projects']">
      {{ "projects" | i18n }}
      <div slot="end" class="tw-text-muted">
        {{ serviceAccountCounts?.projects }}
      </div>
    </bit-tab-link>
    <bit-tab-link [route]="['people']">
      {{ "people" | i18n }}
      <div slot="end" class="tw-text-muted">
        {{ serviceAccountCounts?.people }}
      </div>
    </bit-tab-link>
    <bit-tab-link [route]="['access']">
      {{ "accessTokens" | i18n }}
      <div slot="end" class="tw-text-muted">
        {{ serviceAccountCounts?.accessTokens }}
      </div>
    </bit-tab-link>
    <bit-tab-link [route]="['events']">{{ "eventLogs" | i18n }}</bit-tab-link>
    <bit-tab-link [route]="['config']">{{ "config" | i18n }}</bit-tab-link>
  </bit-tab-nav-bar>
  <button
    type="button"
    slot="secondary"
    bitButton
    buttonType="secondary"
    (click)="openNewAccessTokenDialog()"
    startIcon="bwi-plus"
  >
    {{ "createAccessToken" | i18n }}
  </button>
</app-header>
<router-outlet></router-outlet>
