frontend/yang/yang.node.html

<div class="yang-infobox">
    <div class="yang-info-label">{{data.nodetype | titlecase }} <b>{{name}}</b></div>

    <div class="yang-info-section">
        <div class="yang-info"><span class="yang-info-label">path</span><span class="yang-info-value">{{schema.path}}</span></div>

        <ng-container *ngIf="data.when">
            <div class="yang-info">
                <span class="yang-info-subsection-label">when</span><span class="yang-info-value">{{data.when.condition}}</span>
            </div>
            <div class="yang-info-subsection" *ngIf="data.when">
                <div class="yang-info" *ngIf="data.when.description">
                    <span class="yang-info-label">description</span><pre class="yang-info-value">{{data.when.description.text}}</pre>
                </div>
                <div class="yang-info" *ngIf="data.when.reference">
                    <span class="yang-info-label">reference</span><pre class="yang-info-value">{{data.when.reference.text}}</pre>
                </div>
            </div>
        </ng-container>

        <ng-container *ngIf="data['if-features']">
            <div class="yang-info" *ngFor="let value of data['if-features']">
                <yang-iffeature (refresh)="onRefresh()" [schema]="schema" [data]="value"></yang-iffeature>
            </div>
        </ng-container>
    </div>

    <div class="yang-info-section" *ngIf="data.type">
        <div class="yang-info">
            <span class="yang-info-section-label">type</span>
            <ng-container *ngIf="data.type['derived-from'] != data.type['basetype']">
                <a class="yang-info-value" (click)="derivedFrom(data.type['derived-from'])">{{data.type['derived-from'] | noPrefix}}</a>
            </ng-container>
            <ng-container *ngIf="data.type['derived-from'] == data.type['basetype']">
                <span class="yang-info-value">{{data.type['derived-from'] | noPrefix}}</span>
            </ng-container>
        </div>
        <yang-type [data]="data.type" [typedef]="false" (refresh)="onRefresh()"></yang-type>

        <div class="yang-info" *ngIf="data.units">
            <span class="yang-info-label">units</span><span class="yang-info-value">{{data.units.name}}</span>
        </div>
    </div>

    <div class="yang-info-section">
        <ng-container *ngIf="data.musts">
            <yang-restriction *ngFor="let must of data.musts" [data]="must" [name]="'must'"></yang-restriction>
        </ng-container>
    </div>

    <div class="yang-info-section" *ngIf="data.defaults">
        <div class="yang-info" *ngFor="let default of data.defaults">
            <span class="yang-info-label">default</span><span class="yang-info-value">{{default}}</span>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data.keys || data.uniques">
        <ng-container *ngIf="data.keys">
            <div class="yang-info" *ngFor="let value of data.keys">
                <span class="yang-info-label">key</span><a class="yang-info-value" (click)="link(schema.key, 'tree-node', value)">{{value}}</a>
            </div>
        </ng-container>
        <ng-container *ngIf="data.uniques">
            <div class="yang-info" *ngFor="let value of data.uniques">
                <span class="yang-info-label">unique</span>
                <ng-container *ngFor="let item of value">
                    <a class="yang-info-value" (click)="link(schema.key, 'tree-node', item)">{{item}}</a>&nbsp;
                </ng-container>
            </div>
        </ng-container>
    </div>

    <div class="yang-info-section">
        <div class="yang-info" *ngIf="data.presence">
            <span class="yang-info-label">presence</span><span class="yang-info-value">{{data.presence.value}}</span>
        </div>
        <div class="yang-info" *ngIf="data.config">
            <span class="yang-info-label">config</span><span class="yang-info-value">{{data.config.value}}</span>
        </div>
        <div class="yang-info" *ngIf="data['min-elements']">
            <span class="yang-info-label">min-elements</span><span class="yang-info-value">{{data['min-elements'].value}}</span>
        </div>
        <div class="yang-info" *ngIf="data['max-elements']">
            <span class="yang-info-label">max-elements</span><span class="yang-info-value">{{data['max-elements'].value}}</span>
        </div>
        <div class="yang-info" *ngIf="data.mandatory">
            <span class="yang-info-label">mandatory</span><span class="yang-info-value">{{data.mandatory.value}}</span>
        </div>
        <div class="yang-info" *ngIf="data['ordered-by']">
            <span class="yang-info-label">ordered by</span><span class="yang-info-value">{{data['ordered-by'].value}}</span>
        </div>
        <div class="yang-info" *ngIf="data.status">
            <span class="yang-info-label">status</span><span class="yang-info-value">{{data.status.value}}</span>
        </div>
        <div class="yang-info" *ngIf="data.description">
            <span class="yang-info-label">description</span><pre class="yang-info-value">{{data.description.text}}</pre>
        </div>
        <div class="yang-info" *ngIf="data.reference">
            <span class="yang-info-label">reference</span><pre class="yang-info-value">{{data.reference.text}}</pre>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data['typedefs']"><span class="yang-info-section-label">typedefs</span>
        <div class="yang-info-subsection" *ngFor="let typedef of data['typedefs']">
            <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-typedef', typedef)">{{typedef}}</a></div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data['groupings']"><span class="yang-info-section-label">groupings</span>
        <div class="yang-info-subsection" *ngFor="let grouping of data['groupings']">
            <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-grouping', grouping)">{{grouping}}</a></div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data['data'] && getKeys(data['data']).length"><span class="yang-info-section-label">data</span>
        <div class="yang-info-subsection" *ngFor="let key of getKeys(data['data'])">
            <div class="yang-info">{{data['data'][key]['nodetype']}}&nbsp;<a class="yang-info-value" (click)="link(schema.key, 'tree-node', key)">{{key}}</a></div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data['actions']"><span class="yang-info-section-label">Actions</span>
        <div class="yang-info-subsection" *ngFor="let action of data['actions']">
            <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-node', action)">{{action}}</a></div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data['notifications']"><span class="yang-info-section-label">Notifications</span>
        <div class="yang-info-subsection" *ngFor="let key of data['notifications']">
            <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-node', key)">{{key}}</a></div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data.input"><span class="yang-info-section-label">Input</span>
        <div class="yang-info-subsection">
            <ng-container *ngIf="data.output.musts">
                <yang-restriction *ngFor="let must of data.output.musts" [data]="must" [name]="'must'"></yang-restriction>
            </ng-container>
        </div>

        <div class="yang-info-section" *ngIf="data.input['typedefs']"><span class="yang-info-section-label">typedefs</span>
            <div class="yang-info-subsection" *ngFor="let typedef of data.input['typedefs']">
                <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-typedef', 'input/' + typedef)">{{typedef}}</a></div>
            </div>
        </div>

        <div class="yang-info-section" *ngIf="data.input['groupings']"><span class="yang-info-section-label">groupings</span>
            <div class="yang-info-subsection" *ngFor="let grouping of data.input['groupings']">
                <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-grouping', 'input/' + grouping)">{{grouping}}</a></div>
            </div>
        </div>

        <div class="yang-info-subsection" *ngIf="data.input.data">
            <div class="yang-info" *ngFor="let key of getKeys(data.input.data)">
                {{data.input.data[key]['nodetype']}}&nbsp;<a class="yang-info-value" (click)="link(schema.key, 'tree-node', 'input/' + key)">{{key}}</a>
            </div>
        </div>
    </div>

    <div class="yang-info-section" *ngIf="data.output"><span class="yang-info-section-label">Output</span>
        <div class="yang-info-subsection">
            <ng-container *ngIf="data.output.musts">
                <yang-restriction *ngFor="let must of data.output.musts" [data]="must" [name]="'must'"></yang-restriction>
            </ng-container>
        </div>

        <div class="yang-info-section" *ngIf="data.output['typedefs']"><span class="yang-info-section-label">typedefs</span>
            <div class="yang-info-subsection" *ngFor="let typedef of data.output['typedefs']">
                <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-typedef', 'output/' + typedef)">{{typedef}}</a></div>
            </div>
        </div>

        <div class="yang-info-section" *ngIf="data.output['groupings']"><span class="yang-info-section-label">groupings</span>
            <div class="yang-info-subsection" *ngFor="let grouping of data.output['groupings']">
                <div class="yang-info"><a class="yang-info-value" (click)="link(schema.key, 'tree-grouping', 'output/' + grouping)">{{grouping}}</a></div>
            </div>
        </div>

        <div class="yang-info-subsection" *ngIf="data.output.data">
            <div class="yang-info" *ngFor="let key of getKeys(data.output.data)">
                {{data.output.data[key]['nodetype']}}&nbsp;<a class="yang-info-value" (click)="link(schema.key, 'tree-node', 'output/' + key)">{{key}}</a>
            </div>
        </div>
    </div>
</div>

<!-- <pre>{{schema | json}}</pre> -->
<!-- <pre>{{data | json}}</pre> -->