<span class="topology_title" *ngIf="isShowVLDetails">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
<span class="topology_title" *ngIf="isShowVNFDetails">{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
<span class="topology_title" *ngIf="isShowCPDetails">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
<span class="topology_title" *ngIf="isShowVLDetails">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
<span class="topology_title" *ngIf="isShowVNFDetails">{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
<span class="topology_title" *ngIf="isShowCPDetails">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
<i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
</button>
</div>
<div class="sidebar-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowNSDDetails">
<div class="row">
<i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
</button>
</div>
<div class="sidebar-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowNSDDetails">
<div class="row">
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
[(ngModel)]="nsPackageDetails.id">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
[(ngModel)]="nsPackageDetails.id">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
[(ngModel)]="nsPackageDetails.name">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
[(ngModel)]="nsPackageDetails.name">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
<div class="col-sm-8 p-0">
<textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
name="description" [(ngModel)]="nsPackageDetails.description"></textarea>
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
<div class="col-sm-8 p-0">
<textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
name="description" [(ngModel)]="nsPackageDetails.description"></textarea>
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
[(ngModel)]="nsPackageDetails.version">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
[(ngModel)]="nsPackageDetails.version">
</div>
</div>
<label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
<label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
<div class="col-sm-8 p-0">
<input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
<ul class="list-group list-group-flush dragable">
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vl">
<img src="assets/images/VL.svg" class="ns-svg" draggable="false"/>
<ul class="list-group list-group-flush dragable">
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vl">
<img src="assets/images/VL.svg" class="ns-svg" draggable="false"/>
[attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
container="body" ngbTooltip="{{ list['product-name'] }}">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
[attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
container="body" ngbTooltip="{{ list['product-name'] }}">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
<div class="btn-group list" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
[class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
<div class="btn-group list" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
[class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
<br>{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
<span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
<br>{{'PAGE.TOPOLOGY.VNF' | translate}}</span>