<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You 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.
  ~
  -->

<div class="assembly-options-preview sp-blue-bg">
    <div fxLayout="row" fxLayoutAlign="start center">
        <h4>Pipeline Status</h4>
    </div>
</div>
<div class="sp-blue-border">
    <div fxLayout="column" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length > 0">
        <div fxLayout="row" fxFlex="100">
            <div fxFlex="20"><h5><b>Date</b></h5></div>
            <div fxFlex="20"><h5><b>Status</b></h5></div>
            <div fxFlex="60"><h5><b>Description</b></h5></div>
            <div fxFlex="60"><h5><b>Details</b></h5></div>
        </div>
        <div fxFlex="100" fxLayout="column" *ngFor="let status of pipelineStatus">
            <div fxFlex="100" fxLayout="row">
                <div fxFlex="20"><h5>{{status.timestamp | date:'dd.MM.yyyy HH:mm'}}</h5></div>
                <div fxFlex="20"><h5>{{status.messageType}}</h5></div>
                <div fxFlex="60"><h5>{{status.message}}</h5></div>
                <div fxFlex="60"><h5>-</h5></div>
            </div>
        </div>
    </div>
    <div fxLayout="column"fxLayoutAlign="center center" style="min-height:100px; padding:5px;padding-left:15px;" *ngIf="pipelineStatus.length==0">
        (no status information available)
    </div>
</div>