<!-- ********************************************************************************
 * Copyright (c) 2015-2018 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
 *
 ******************************************************************************** -->

  <div class="mdm-extsystem-viewer-container">

    <p-table class="ext-system-table" [value]="getExternalSystems()" *ngIf="selectedEnvironment && extSystems" styleClass="table-hover"
             (onRowSelect)="onExtSystemRowSelect($event)" (onRowUnselect)="onExtSystemRowUnselect($event)"
             selectionMode="single" [(selection)]="selectedExtSystem">
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'administration.extsystem.name' | translate }}</th>
          <th>{{ 'administration.extsystem.description' | translate }}</th>
          <th class="button-col"></th>
          <th class="button-col"></th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" [pContextMenuRow]="rowData">
          <td>
            <span>{{rowData.name}}</span>
          </td>
          <td>
            <span>{{getAttributeValueFromNode(rowData,'Description')}}</span>
          </td>
          <td>
            <button type="button" class="btn btn-default pull-right" (click)="editExtSystem(rowData)" title="{{'administration.extsystem.btn-edit' | translate }}">
              <span class="fa fa-pencil-square-o"></span>
            </button>
          </td>
          <td>
            <button type="button" class="btn btn-default pull-right" (click)="removeExtSystem(rowData)" title="{{'administration.extsystem.btn-del' | translate }}">
              <span class="fa fa-times"></span>
            </button>
          </td>
        </tr>
      </ng-template>
    </p-table>

    <p-dialog header="{{ 'administration.extsystem.dialog-ext-system-delete-title' | translate }}" [(visible)]="dialogExtSystemDelete">
      <div class="text">
        <span>{{ 'administration.extsystem.dialog-ext-system-delete-text' | translate }}</span>
      </div>
      <div class="dialogcommands">
        <button type="button" class="btn btn-default pull-right" (click)="confirmRemoveExtSystem()">
          <span class="fa fa-plus"></span> {{'administration.extsystem.btn-del' | translate }}
        </button>
        <button type="button" class="btn btn-default pull-right" (click)="cancelRemoveExtSystem()">
          <span class="fa fa-times"></span> {{'administration.extsystem.btn-cancel' | translate }}
        </button>
      </div>
    </p-dialog>

  <p-dialog header="{{ 'administration.extsystem.dialog-ext-system-title' | translate}}" [(visible)]="dialogExtSystemCreate">
    <table *ngIf="tmpExtSystemCreate">
      <tr>
        <td>{{ 'administration.extsystem.name' | translate}}</td>
        <td><input required type="text" [(ngModel)]="tmpExtSystemCreate.name" /></td>
      </tr>
     </table>
    <div class="dialogcommands">
      <button type="button" class="btn btn-default pull-right" (click)="saveDialogExtSystem()">
        <span class="fa fa-plus"></span> {{'administration.extsystem.btn-save' | translate }}
      </button>
      <button type="button" class="btn btn-default pull-right" (click)="cancelDialogExtSystem()">
        <span class="fa fa-times"></span> {{'administration.extsystem.btn-cancel' | translate }}
      </button>
    </div>
  </p-dialog>

    <div *ngIf="selectedEnvironment" class="commands">
      <button type="button" class="btn btn-default pull-right" (click)="addExtSystem()">
        <span class="fa fa-plus"></span> {{'administration.extsystem.btn-add' | translate }}
      </button>
    </div>

    <div class="custom-split-pane" *ngIf="selectedExtSystem">
      <div class="custom-split-pane-content custom-split-pane-left">
        <div>{{ 'administration.extsystem.ext-system-attributes' | translate }}</div>
        <p-table [value]="getExternalSystemAttributes()" selectionMode="single" [(selection)]="selectedExtSystemAttr">
          <ng-template pTemplate="header">
            <tr>
              <th>{{ 'administration.extsystem.name' | translate }}</th>
              <th>{{ 'administration.extsystem.description' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" [pContextMenuRow]="rowData">
              <td>{{rowData.name}}</td>
              <td>{{getAttributeValueFromNode(rowData,'Description')}}</td>
            </tr>
          </ng-template>
        </p-table>
        <div *ngIf="loadingExtSystemAttr">{{ 'administration.extsystem.loading-attributes' | translate }}</div>
      </div>
      <div class="custom-split-pane-content custom-split-pane-right">
        <div>{{ 'administration.extsystem.mdm-attributes' | translate }}</div>
        <p-table *ngIf="selectedExtSystemAttr" [value]="getMDMAttributes()">
          <ng-template pTemplate="header">
            <tr>
              <th>{{ 'administration.extsystem.component-type' | translate }}</th>
              <th>{{ 'administration.extsystem.component-name' | translate }}</th>
              <th>{{ 'administration.extsystem.attribute-name' | translate }}</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr>
              <td>{{getAttributeValueFromNode(rowData,'CompType')}}</td>
              <td>{{getAttributeValueFromNode(rowData,'CompName')}}</td>
              <td>{{getAttributeValueFromNode(rowData,'AttrName')}}</td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </div>

  </div>