evt-angular-ovi/src/app/components/lem-entry/lem-entry-detail/lem-entry-detail.component.html

<div class="card lem-detail-container">
    <div class="card-body lem-detail-content">
        <span>
            <evt-lem-entry-readings class="lem-detail-readings" [data]="data" [template]="nestedLemsReadingsTemplate" [rdgHasCounter]="true"></evt-lem-entry-readings>
            <div *ngIf="data.nestedLemsIDs.length > 0" class="lem-detail-nested-readings-container">
                <span *ngFor="let nesLem of nestedLems; let i = index" class="lem-detail-nested-readings">
                    <sup>{{ i + 1 }} </sup>
                    <evt-lem-entry-readings [data]="nesLem" [template]="nestedLemsReadingsTemplate" [rdgHasCounter]="false"></evt-lem-entry-readings>
                </span>
            </div>
        </span>
        <evt-pinner [item]="data" renderer="LemsEntryReadings" pinType="LemsEntry"></evt-pinner>
    </div>
    <div class="card-footer lem-detail-tabs">
        <ul ngbNav #lemEntryTab="ngbNav" class="nav-pills">
            <li ngbNavItem="lemmaNotes" *ngIf="data.notes.length > 0">
                <a class="lem-detail-btn" ngbNavLink>{{'lemmaNotes' | translate}}</a>
                <ng-template ngbNavContent>
                    <evt-note *ngFor="let note of data.notes" [data]="note"></evt-note>
                </ng-template>
            </li>
            <li ngbNavItem="notSignificantRdg" *ngIf="notSignificantRdg.length > 0">
                <a class="lem-detail-btn" ngbNavLink>{{'ortographicVariants' | translate}}</a>
                <ng-template ngbNavContent>
                    <span class="d-block" *ngFor="let el of notSignificantRdg">
                        <evt-reading [data]="el"></evt-reading>
                        <!--span *ngFor="let witID of el.witIDs" class="font-italic"> {{ witID }} </span-->
                    </span>
                </ng-template>
            </li>
            <li ngbNavItem="info">
                <a class="lem-detail-btn-new" ngbNavLink>{{'info' | translate}}</a>
                <ng-template ngbNavContent>
                    <div class="info-lemma-wrapper-new" *ngIf="data.lemma">
                        <span>{{'infoForLemma' | translate}} </span>
                        <evt-reading *ngIf="data.nestedLemsIDs.length === 0" class="info-rdg" [data]="data.lemma"></evt-reading>
                        <span *ngIf="data.nestedLemsIDs.length > 0" class="info-rdg">
                            <ng-container *ngTemplateOutlet="nestedLemsReadingsTemplate; context: { rdgHasCounter: rdgHasCounter }"></ng-container>
                        </span>
                        <span class="d-block ml-2" *ngFor="let metadata of rdgMetadata | keyvalue">
                            <span class="info-label" *ngIf="metadata.key !== 'id'">{{ metadata.key }}:</span> {{ metadata.value }}
                        </span>
                        <span class="d-block ml-2" *ngIf="(rdgMetadata | keyvalue).length === 0">
                            <span class="font-italic">{{'noDataAvailable' | translate}}</span>
                        </span>
                    </div>
                    <!--div>
                        <span class="more-info-label">{{'moreInfoAboutLem' | translate}}</span>
                        <ng-container *ngFor="let rdg of readings">
                            <div *ngIf="(rdg.attributes | keyvalue).length !== 0" class="mb-2">
                                <span>{{'metadataFor' | translate}} </span>
                                <ng-container *ngIf="rdg.content.length !== 0">
                                    <evt-reading *ngIf="data.nestedLemsIDs.length === 0" class="info-rdg" [data]="rdg"></evt-reading>
                                    <ng-container *ngIf="data.nestedLemsIDs.length > 0">
                                        <ng-container *ngFor="let c of rdg.content">
                                            <evt-content-viewer class="info-rdg" *ngIf="!isLemEntry(c)" [content]="c"></evt-content-viewer>
                                            <evt-reading class="info-rdg" *ngIf="isLemEntry(c)" [data]="c.lemma"></evt-reading>
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                                <span *ngIf="rdg.content.length === 0" class="font-italic info-rdg">{{'omit' | translate}}</span>
                                <span *ngIf="rdg.attributes.wit" class="d-block ml-2">
                                    <span class="info-label">{{'wit' | translate}}</span> {{rdg.attributes.wit}}
                                </span>
                                <ng-container *ngFor="let metadata of rdgMetadata | keyvalue">
                                    <span class="d-block ml-2" *ngIf="metadata.key !== 'wit'">
                                        <span class="info-label">{{ metadata.key }}:</span> {{ metadata.value }}
                                    </span>
                                </ng-container>
                            </div>
                        </ng-container>
                    </div-->
                </ng-template>
            </li>
            <li ngbNavItem="xml">
                <a class="lem-detail-btn" ngbNavLink>{{'xml' | translate}}</a>
                <ng-template ngbNavContent>
                    <pre>{{ data.originalEncoding | xmlBeautify }}</pre>
                </ng-template>
            </li>
        </ul>
        <div [ngbNavOutlet]="lemEntryTab" class="tab-content"></div>
    </div>
</div>

<ng-template #nestedLemsReadingsTemplate let-rdgHasCounter="rdgHasCounter">
    <ng-container *ngFor="let c of data.lemma.content">
        <evt-content-viewer *ngIf="!isLemEntry(c)" class="{{ data.class }}" [content]="c"></evt-content-viewer>

        <ng-container *ngIf="isLemEntry(c)">
            <!-- Handle reading of nested app with no further nesting -->
            <evt-reading [data]="c.lemma"></evt-reading>
            <sup *ngIf="rdgHasCounter">{{ getNestedLemPos(c.id) + 1 }} </sup>

            <!-- Handle reading of nested app with further nesting -->
            <ng-container *ngIf="c.nestedLemsIDs.length > 0">
                <ng-container *ngFor="let nesID of c.nestedLemsIDs; let i = index">
                    <evt-reading [data]="getNestedLemLemma(nesID)"></evt-reading>
                    <sup *ngIf="rdgHasCounter">{{ getNestedLemPos(nesID) + 1 }}</sup>
                </ng-container>
            </ng-container>
        </ng-container>
    </ng-container>
</ng-template>