<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<ng-template #deviceTypeInformation>
  <h3 class="page-heading">Device type information</h3>

  <mat-table [dataSource]="dataSourceDeviceTypeInformation" class="table-device-type-information">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Device type name</span></mat-header-cell>
      <mat-cell *matCellDef="let device">
        <span class="text-wrap">
          <mat-icon fontIcon="bosch-ic-truck"></mat-icon>
          {{ device.name }}
        </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="manufacturer">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Manufacturer</span></mat-header-cell>
      <mat-cell *matCellDef="let device" class="text-wrap">{{ device.manufacturer }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="overrideOwnerID">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Override owner ID</span></mat-header-cell>
      <mat-cell *matCellDef="let device" class="text-wrap">{{ device.overrideOwnerID }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="version">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Version</span></mat-header-cell>
      <mat-cell *matCellDef="let device" class="text-wrap">{{ device.version }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let device" style="padding-right: 0px">
        <button bciIntegratedButton mat-icon-button>
          <mat-icon fontIcon="Bosch-Ic-delete"></mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsDeviceTypeInformation"></mat-header-row>
    <mat-row *matRowDef="let device; columns: displayedColumnsDeviceTypeInformation"></mat-row>
  </mat-table>
</ng-template>

<ng-template #customProperties>
  <h3 class="page-heading">Custom properties</h3>

  <mat-table [dataSource]="dataSourceCustomProperties" class="table-properties">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Name</span></mat-header-cell>
      <mat-cell *matCellDef="let prop">
        <span class="text-wrap">
          {{ prop.name }}
        </span></mat-cell
      >
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Description</span></mat-header-cell>
      <mat-cell *matCellDef="let prop">
        <span class="text-wrap">
          {{ prop.description }}
        </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="unit">
      <mat-header-cell *matHeaderCellDef>Unit</mat-header-cell>
      <mat-cell *matCellDef="let prop">{{ prop.unit }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="dataType">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Data type</span></mat-header-cell>
      <mat-cell *matCellDef="let prop"
        ><span class="text-wrap">{{ prop.dataType }}</span></mat-cell
      >
    </ng-container>

    <ng-container matColumnDef="dataValue">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Data value</span></mat-header-cell>
      <mat-cell *matCellDef="let prop"
        ><span class="text-wrap">{{ prop.dataValue }}</span></mat-cell
      >
    </ng-container>

    <ng-container matColumnDef="mandatory">
      <mat-header-cell *matHeaderCellDef><span class="text-wrap">Mandatory</span></mat-header-cell>
      <mat-cell *matCellDef="let prop"
        ><span class="text-wrap">{{ prop.mandatory ? 'Yes' : 'No' }}</span></mat-cell
      >
    </ng-container>

    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let prop" style="justify-content: flex-end">
        <button bciIntegratedButton mat-icon-button>
          <mat-icon fontIcon="Bosch-Ic-edit"></mat-icon>
        </button>
        <button bciIntegratedButton mat-icon-button>
          <mat-icon fontIcon="Bosch-Ic-delete"></mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsCustomProperties"></mat-header-row>
    <mat-row *matRowDef="let prop; columns: displayedColumnsCustomProperties"></mat-row>
  </mat-table>
</ng-template>

<ng-template #detailsTab>
  <ng-container *ngTemplateOutlet="deviceTypeInformation"></ng-container>
  <ng-container *ngTemplateOutlet="customProperties"></ng-container>
</ng-template>

<ng-template #detailContent>
  <div class="detail-breadcrumb" *ngIf="isMobileView" (click)="close()">
    <mat-icon fontIcon="bosch-ic-back-left"></mat-icon>
    <mat-icon fontIcon="bosch-ic-truck"></mat-icon>
    <span>Consectetur Ultricies Magna</span>
  </div>

  <mat-tab-group class="page-tab-group">
    <mat-tab label="Details">
      <ng-container *ngTemplateOutlet="detailsTab"></ng-container>
    </mat-tab>
    <mat-tab label="Devices">Devices</mat-tab>
    <mat-tab label="Topology">Topology</mat-tab>
  </mat-tab-group>
</ng-template>

<ng-container *ngTemplateOutlet="detailContent"></ng-container>
