<!--
  ~ 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>
    <div>
        <table
            mat-table
            [dataSource]="eventSchema.eventProperties"
            class="mat-mdc-table mdc-data-table__table"
        >
            <ng-container matColumnDef="label">
                <th mat-header-cell *matHeaderCellDef>
                    <strong>Field Name</strong>
                </th>
                <td mat-cell *matCellDef="let property">
                    {{ property.label ? property.label : '(n/a)' }}
                </td>
            </ng-container>

            <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef>
                    <strong>Description</strong>
                </th>
                <td mat-cell *matCellDef="let property">
                    {{ property.description ? property.description : '(n/a)' }}
                </td>
            </ng-container>

            <ng-container matColumnDef="runtimeName">
                <th mat-header-cell *matHeaderCellDef>
                    <strong>Runtime Name</strong>
                </th>
                <td mat-cell *matCellDef="let property">
                    {{ property.runtimeName }}
                </td>
            </ng-container>

            <ng-container matColumnDef="runtimeType">
                <th mat-header-cell *matHeaderCellDef><strong>Type</strong></th>
                <td mat-cell *matCellDef="let property">
                    {{ getFriendlyRuntimeType(property.runtimeType) }}
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
    </div>
</div>
