<!--
  ~ 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 *ngIf="!runtimeData && !runtimeDataError">
    <div fxLayout="column">
        <div fxLayoutAlign="center" >
            <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin: 10px 0 5px 0" color="accent">Loading</mat-spinner>
        </div>
        <div fxLayoutAlign="center">
            <h3>Gathering data for live preview...</h3>
        </div>
    </div>
</div>
<div *ngIf="runtimeData" data-cy="sp-connect-adapter-live-preview">
    <p>Here is a preview of your data:</p>
    <table class="dataTable row-border hover">
        <thead>
        <tr>
            <th>Runtime Name</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody id="preview-data-rows-id">
        <tr *ngFor="let property of streamDescription.eventSchema.eventProperties" class="preview-row">
            <td>{{property.runtimeName}}</td>
            <td *ngIf="isImage(property)"> <img src="data:image/png;base64,{{runtimeData[property.runtimeName]}}" style="max-width: 150px;" /> </td>
            <td *ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>
            <td *ngIf="hasNoDomainProperty(property)">{{runtimeData[property.runtimeName]}}</td>
        </tr>
        </tbody>
    </table>
</div>
<div *ngIf="runtimeDataError">
    <p>Preview is currently unavailable.</p>
</div>
