<nav #confignav id="confignav">
    <a *ngFor="let session of sessionsService.sessions" [class.active]="session.key==activeSession.key"
        (click)="changeActiveSession(session.key)">{{session.device.hostname}}:{{session.device.port}}
        <!--<span *ngIf="session.key==activeSession.key" class="tab-reload tab-action-first" (click)="reloadData(session.key)">o</span>-->
        <img *ngIf="session.key==activeSession.key" class="tab-icon tab-reload tab-action-first" src="assets/netopeer/icons/reload.svg"  alt="o" title="reload"
            onmouseover="this.src='assets/netopeer/icons/reload_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/reload.svg'" (click)="reloadData()"/>
        <img class="tab-icon tab-close tab-action-last" src="assets/netopeer/icons/close.svg"  alt="x" title="disconnect"
            onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/close.svg'" (click)="disconnect(session.key)"/>
    </a><a (click)="addSession()" onmouseout="getElementById('tabadd').style.filter='invert(100%)'" onmouseover="getElementById('tabadd').style.filter='invert(0%)'">
        <img id="tabadd" class="tab-icon tab-add tab-action-last" src="assets/netopeer/icons/add.svg" alt="+" title="add connection"
            onmouseover="this.src='assets/netopeer/icons/add_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/add.svg'"/>
    </a>
</nav>

<div class="netopeer-content" [style.padding-top]="'calc(' + confignav.offsetHeight + 'px - -0.7em)'">
<div *ngIf="sessionsService.activeSession">
    <p class="msg-failure msg-rounded" *ngIf="err_msg"><img class="msg-close" (click)="err_msg=''" src="assets/netopeer/icons/close_active.svg" alt="x" title="close"/>{{err_msg}}</p>
    <table class="items">
        <tr class="item_header">
            <th class="item_left item_actions" [ngSwitch]="activeSession.cpbltsVisibility">
                <img *ngSwitchCase="false" class="item_action_expand" (click)="getCapabilities(activeSession.key)"
                    src="assets/netopeer/icons/show.svg" alt="v" title="show"
                    onmouseover="this.src='assets/netopeer/icons/show_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/show.svg'"/>
                <img *ngSwitchCase="true" class="item_action_collapse" (click)="setCpbltsVisibility(false)"
                    src="assets/netopeer/icons/close.svg" alt="x" title="close"
                    onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/close.svg'"/>
            </th>
            <th>Capability / Module</th>
            <th class="item_right">Version</th>
        </tr>
        <ng-container *ngIf="activeSession.cpbltsVisibility==true && activeSession.cpblts">
        <tr class="item" *ngFor="let cap of activeSession.cpblts">
            <td class="item_left">&nbsp;</td>
            <td>{{parseCapabilityName(cap)}}</td>
            <td class="item_right">{{parseCapabilityRevision(cap)}}</td>
        </tr>
        </ng-container>
    </table>

    <table class="items">
        <tr class="item_header">
            <th class="item_left item_actions" style="cursor: default;">&nbsp;</th>
            <th class="item_right" >Data</th>
        </tr>
    </table>
    <div>
        <img *ngIf="activeSession.dataVisibility!='root'" class="icon_action" (click)="rpcGet(false)"
            src="assets/netopeer/icons/show_children.svg" alt="v" title="expand roots"
            onmouseover="this.src='assets/netopeer/icons/show_children_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/show_children.svg'"/>
        <img *ngIf="activeSession.dataVisibility!='all'" class="icon_action" (click)="rpcGet(true)"
            src="assets/netopeer/icons/show_all.svg" alt="w" title="expand all"
            onmouseover="this.src='assets/netopeer/icons/show_all_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/show_all.svg'"/>
        <img *ngIf="activeSession.dataVisibility!='none'" class="icon_action" (click)="setDataVisibility('none')"
            src="assets/netopeer/icons/collapse.svg" alt="x" title="collapse"
            onmouseover="this.src='assets/netopeer/icons/collapse_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/collapse.svg'"/>
        <span *ngIf="activeSession.statusVisibility"><a (click)="invertStatus()">hide</a> status data</span>
        <span *ngIf="!activeSession.statusVisibility"><a (click)="invertStatus()">show</a> status data</span>
        <!--<span><input type="checkbox" name="statusVisibility" [checked]="activeSession.statusVisibility" (change)="invertStatus()"/> include status data</span>-->
    </div><br/>
    <ng-container *ngIf="activeSession.dataVisibility!='none' && activeSession.data">
    <div id="config-data">
        <ng-container *ngFor="let root of activeSession.data">
            <tree-view [node]="root"></tree-view>
        </ng-container>
        <!--<pre>{{activeSession.data | json}}</pre>-->
    </div>
	<div #modificationsStatus *ngIf="activeSession.modifications" class="modifications-status">&nbsp;
		<div *ngIf="activeSession.modifications" class="msg-rounded" [style.width.px]="modificationsStatus.offsetWidth">
		Configuration data were changed. Do you wish to
		<button (click)="applyChanges()">apply</button> /
		<button (click)="cancelChanges()">cancel</button>
		all changes?
		</div>
	</div>
    </ng-container>
</div>

</div>