<div class="kt-portlet">
    <div class="kt-portlet__head">
        <div class="kt-portlet__head-label">
            <h3 class="kt-portlet__head-title">
                    {{"OrganizationTree" | localize}}
            </h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <button *ngIf="'Pages.Administration.OrganizationUnits.ManageOrganizationTree' | permission" (click)="addUnit(null)" class="btn btn-primary btn-brand btn-pill">
                <i class="fa fa-plus"></i> {{"AddRootUnit" | localize}}
            </button>
        </div>
    </div>
    <div class="kt-portlet__body">
        <p-tree [value]="treeData"
                selectionMode="single"
                [(selection)]="selectedOu"
                (onNodeSelect)="nodeSelect($event)"
                (onNodeDrop)="nodeDrop($event)"
                [contextMenu]="ouContextMenu"
                [draggableNodes]="canManageOrganizationUnits" [droppableNodes]="canManageOrganizationUnits">
            <ng-template let-node pTemplate="default">
                <div>
                    <span>
                        {{node.label}}
                    </span>
                    <small style="font-size: .82em; opacity: .5;">{{node.memberCount}} {{'Members' | localize}}, {{node.roleCount}} {{'Roles' | localize}}</small>
                </div>
            </ng-template>
        </p-tree>
        <p-contextMenu #ouContextMenu [model]="ouContextMenuItems" appendTo="body" baseZIndex="99999"></p-contextMenu>
        <div *ngIf="!totalUnitCount" class="text-muted">
            {{"NoOrganizationUnitDefinedYet" | localize}}
        </div>
    </div>
</div>

<createOrEditOrganizationUnitModal #createOrEditOrganizationUnitModal (unitCreated)="unitCreated($event)" (unitUpdated)="unitUpdated($event)"></createOrEditOrganizationUnitModal>
<entityTypeHistoryModal #entityTypeHistoryModal></entityTypeHistoryModal>
