<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">

  <mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true">
    <app-context-preview *ngIf="openedItem" (previewClose)="closePanel()" [context]="openedItem"></app-context-preview>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="vitamui-header">
      <div class="vitamui-container">
        <vitamui-common-navbar [appId]="appId" [hideTenantMenu]="true" [hideCustomerMenu]="true"></vitamui-common-navbar>

        <h2 i18n="Search context@@contextSearchHeader">
          <img src="assets/mini-logo-vitam.png"> Paramétrer les <strong>Contextes Applicatifs</strong>
        </h2>

        <div class="controls">

          <vitamui-common-search-bar
            name="context-search"
            (search)="onSearchSubmit($event)"
            placeholder="Nom, ID" i18n-placeholder="@@contextSearchPlaceholder"
          ></vitamui-common-search-bar>

          <div class="actions">
            <button class="btn secondary" (click)="openCreateContextDialog()">
              <i class="vitamui-icon vitamui-icon-bank-plus btn-create"></i> <span i18n="Create context button label@@contextListCreateButton">Créer un contexte</span>
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="vitamui-body vitamui-container">
      <app-context-list (contextClick)="showContext($event)" [search]="search"></app-context-list>
    </div>
  </mat-sidenav-content>

</mat-sidenav-container>