<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>
