<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-cumulocity-iot'"></i>
    <h4 id="modal-title">{{ 'Platform info' | translate }}</h4>
  </div>

  <div class="modal-inner-scroll" id="modal-body">
    <div class="p-l-24 p-r-24">
      <table class="table table-condensed">
        <colgroup>
          <col width="50%" />
          <col width="50%" />
        </colgroup>
        <thead>
          <tr>
            <th class="sticky-top bg-component" [title]="'Application' | translate" translate>
              Application
            </th>
            <th
              class="text-right sticky-top bg-component"
              [title]="'Version' | translate"
              translate
            >
              Version
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of version.nonHiddenItems$ | async">
            <td class="text-truncate" [title]="item.label | translate">
              {{ item.label | translate }}
            </td>
            <td class="text-truncate text-right" [title]="item.version">{{ item.version }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal-footer">
    <button
      title="{{ 'Close' | translate }}"
      type="button"
      class="btn btn-default"
      (click)="close()"
    >
      {{ 'Close' | translate }}
    </button>
    <button
      title="{{ 'Download platform details' | translate }}"
      type="button"
      class="btn btn-primary"
      (click)="downloadPlatformDetails()"
    >
      {{ 'Download platform details' | translate }}
    </button>
  </div>
</div>