<div class="container">
    <div class="header">
        <div class="title">Page Versions</div>
        <button
            *ngIf="selectedVersion && !selectedVersion.currentVersion"
            title="Revert to this version"
            class="revert"
            (click)="revertToVersion()"
        >
            Revert
        </button>
        <button title="Close" class="close" (click)="dismiss()">
            <i class="fa fa-times"></i>
        </button>
    </div>
    <div class="contents">
        <ion-list>
            <ion-item button *ngFor="let version of pageVersions" (click)="onVersionClick(version)" [color]="selectedVersion === version ? 'primary' : ''">
                <ion-label>
                    <h4 style="font-weight: bold">
                        #{{ version.versionNum }}
                        <span class="version-date">({{ version.versionCreateDate.toLocaleString() }})</span>
                        <span class="current-version"><i *ngIf="version.currentVersion" class="fa fa-asterisk" title="Current version"></i></span>
                    </h4>
                    <h5>{{ version.versionMessage }} by {{ version.userDisplay }}</h5>
                </ion-label>
            </ion-item>
        </ion-list>
        <div class="preview">
            <app-editor [pageId]="pageId" *ngIf="selectedVersion" [hosted]="true" [readonly]="true" [version]="selectedVersion.versionNum" #editor></app-editor>
        </div>
    </div>
</div>