<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<app-card-layout>
  <div header>
    <span>{{ 'CommunicationTypes.Title' | translate }}</span>
    <div class="pull-right" *visibleByRight>
      <button class="btn btn-primary new-button" (click)="communicationTypesSandbox.setDisplayForm()">
        {{ 'CommunicationTypes.New' | translate }}
      </button>
    </div>
  </div>
  <div class="communication-types-grid-wrapper" body>
    <ag-grid-angular
      autoResizeColumns
      class="ag-theme-balham ag-grid-height"
      [ngClass]="communicationTypesSandbox.displayForm ? 'ag-grid-height-edit' : 'ag-grid-height-list'"
      [gridOptions]="gridOptions"
      [columnDefs]="columnDefinition"
      [rowSelection]="'single'"
      [frameworkComponents]="frameworkComponents"
      [rowData]="communicationTypesSandbox.communicationTypes$ | async"
      [overlayNoRowsTemplate]="noRowsTemplate"
    >
    </ag-grid-angular>

    <app-spinner [isRunning]="communicationTypesSandbox.communicationTypesLoading$ | async"></app-spinner>

    <div *ngIf="communicationTypesSandbox.displayForm" class="communication-types-details">
      <app-communication-types-details></app-communication-types-details>
    </div>
  </div>
</app-card-layout>