<div class="panel panel-default"
     [class.is-open]="popupShown"
     [class.is-closed]="!popupShown">
    <div class="panel-header">
        <button type="button" class="close" (click)="closePopup()"
                aria-label="Close">
            <fa name="times"></fa>
        </button>
        <h4 class="panel-title">{{dispKey}}</h4>
    </div>
    <div class="panel-body">
        <p *ngIf="noDetails()">
            There are no details for this item.
        </p>
        <div *ngIf="!noDetails()">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let detail of details; odd as odd; even as even"
                    [class.bg-odd]="odd" [class.bg-even]="even">
                    <td [class.bg-odd]="odd" [class.bg-even]="even">{{detail.title}}</td>
                    <td [class.bg-odd]="odd" [class.bg-even]="even">{{detail.value}}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <hr>
        <p *ngIf="noMenuItems()">
            There are no actions for this item.
        </p>

        <table class="table" *ngIf="!noMenuItems()">
            <tbody>
            <tr>
                <td>
                    <button *ngIf="showGoUpParentButton()"
                            class="btn btn-block" style="white-space: normal;"
                            (click)="goUpParentButtonClicked(btn)">
                        <fa name="back"></fa>
                        Back
                    </button>
                </td>
            </tr>
            <tr *ngFor="let item of menuItems">
                <td>
                    <button class="btn btn-block" style="white-space: normal;"
                            (click)="menuItemClicked(item)">
                        <fa *ngIf="item.icon != null" [name]="item.icon"></fa>
                        {{item.name}}
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>