//-  Copyright (c) 2019 AT&T Intellectual Property.                             #
//-                                                                             #
//-  Licensed under the Apache License, Version 2.0 (the "License");            #
//-  you may not use this file except in compliance with the License.           #
//-  You may obtain a copy of the License at                                    #
//-                                                                             #
//-      http://www.apache.org/licenses/LICENSE-2.0                             #
//-                                                                             #
//-  Unless required by applicable law or agreed to in writing, software        #
//-  distributed under the License is distributed on an "AS IS" BASIS,          #
//-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #
//-  See the License for the specific language governing permissions and        #
//-  limitations under the License.                                             #
//- #############################################################################


.row.mt-2
  .col-sm-4(*ngIf="data")
    h3 {{ data.testName }}
    p {{ data.testDescription }}
    p.text-muted Updated At {{ data.updatedAt }}
    p.text-muted Created At {{ data.createdAt }}
  .col-sm-8
    mat-card.mb-4
      div(mat-card-image, style="padding: 5% 2px; margin:0px; width:100%; position: relative; cursor: pointer", #canvas, (click)="enlargeBpmn()", [attr.id]="'canvas' + testDefinitionId")
        button(mat-icon-button, color="primary", style="position: absolute; top: 0px; right: 0px; z-index: 100")
          mat-icon zoom_in

.row(*ngIf="testInstanceList")
  .col-12
    table.mat-elevation-z4(mat-table, [dataSource]="testInstanceList", style="width: 100%")

      ng-container(matColumnDef="name")
        th(mat-header-cell, *matHeaderCellDef) Instances
        td(mat-cell, *matCellDef="let element")
          a([routerLink]="['/test-instances', {filter: element._id}]") {{ element.testInstanceName}}

      ng-container(matColumnDef="{{status}}", *ngFor="let status of statusList")
        th(mat-header-cell, *matHeaderCellDef) # {{status.toLowerCase()}}
        td(mat-cell, *matCellDef="let element") 
          .dropdown(ngbDropdown, placement="top-right", *ngIf="element[status]")
            a(ngbDropdownToggle) {{ element[status]}}
            .dropdown-menu(ngbDropdownMenu, style="max-height: 200px; overflow-y: scroll")
              div(*ngFor="let execution of testExecutionList | filterBy: {testResult: status}")
                a.dropdown-item([routerLink]="['/control-panel']", [queryParams]="{id: execution._id}", *ngIf="execution.historicTestInstance._id == element._id" )
                  i.fa.fa-fw.fa-bar-chart(style="color: orange")
                  span.pl-1 {{execution.startTime}}
      
      ng-container(matColumnDef="options", stickyEnd)
        th.optionsColumn(mat-header-cell, *matHeaderCellDef)
        td.optionsColumn(mat-cell, *matCellDef="let element") 
          .dropdown.options(ngbDropdown, placement="left", style="margin-right: -20px")
            button(mat-icon-button, ngbDropdownToggle) 
              mat-icon more_vert
            .dropdown-menu(ngbDropdownMenu)
              a.dropdown-item((click)='executeTestInstance(element)')
                i.fa.fa-fw.fa-refresh(style="color: green")
                span.pl-1 Execute

      tr(mat-header-row, *matHeaderRowDef="displayedColumns")
      tr(mat-row, *matRowDef="let row; columns: displayedColumns")

    mat-paginator([pageSizeOptions]="[5, 10]")