<!--
interface Organization {
    name: string;
    url: string;
    children: Organization[];
}
org: Organization[];
-->
<div class="invid-tree">
    <ng-template #recursiveList let-list>
        <div *ngFor="let item of list" class="invid-tree-item">
            <div class="btn-group">
                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="min-width: auto;">
                    <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:" (click)="editOrg(item)"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                    <li><a href="javascript:" (click)="install(item)"><i class="glyphicon glyphicon-cloud-upload"></i> Install</a></li>
                    <li><a href="javascript:" (click)="addOrg(item)"><i class="glyphicon glyphicon-plus"></i> Add</a></li>
                </ul>
            </div>
            <a href="{{item.url || 'javascript:'}}" target="_blank">{{item.name}}</a>
            <div *ngIf="item.children">
                <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
            </div>
        </div>
    </ng-template>
    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: org }"></ng-container>
</div>