<div>
    <nz-tabset>
        <nz-tab nzTitle="Details">
            <nz-descriptions nzLayout="vertical">
                <nz-descriptions-item
                    nzTitle="Name"
                >{{globalBranch.name}}
                </nz-descriptions-item>
                <nz-descriptions-item
                    nzTitle="Created by"
                >{{globalBranch.userName}}
                </nz-descriptions-item>
                <nz-descriptions-item
                    nzTitle="Updated"
                >{{globalBranch.updatedDate | date:'HH:mm EE dd-MMM'}}
                </nz-descriptions-item>
                <nz-descriptions-item
                    nzTitle="Comment"
                >{{globalBranch.comment}}
                </nz-descriptions-item>
            </nz-descriptions>
        </nz-tab>
        <nz-tab nzTitle="Anchors">
            <p *ngIf="noAnchors()">
                There are no anchor points in this branch.
            </p>
            <div *ngIf="!noAnchors()">
                <nz-table class="scroll-box" ngSize="small" nzTemplateMode>
                    <tbody>
                    <tr
                        (click)="showSummaryPopup($event, item)"
                        *ngFor="let item of anchorDocs"
                    >
                        <td>
                                <span
                                    nz-text
                                ><strong>{{item.header}}</strong></span
                                >
                            <span
                                nz-text nzDisabled
                            >, {{item.body}}<br
                            /></span>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
        </nz-tab>
        <nz-tab nzTitle="Items">
            <p *ngIf="noDisps()">
                There are no items in this branch.
            </p>
            <div *ngIf="!noDisps()">
                <nz-table ngSize="small" nzTemplateMode>
                    <tbody>
                    <tr
                        *ngFor="let item of disps; odd as odd; even as even"
                    >
                        <td>
                            <button
                                (click)="positonDispOnDiagram(item.disp)"
                                nz-button
                            >
                                <i
                                    nz-icon
                                    nzTheme="outline"
                                    nzType="environment"
                                ></i>
                            </button>
                        </td>
                        <td>
                                <span
                                    *ngFor="let line of item.dispDesc; let last = last"
                                >
                                    {{line}} <br *ngIf="!last" />
                                </span>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
        </nz-tab>
    </nz-tabset>
</div>
