<div ng-controller="Umbraco.Overlays.TreePickerController">

    <div ng-hide="miniListView">

        <div class="umb-control-group">
            <umb-tree-search-box
                ng-if="enableSearh"
                hide-search-callback="hideSearch"
                search-callback="onSearchResults"
                search-from-id="{{searchInfo.searchFromId}}"
                search-from-name="{{searchInfo.searchFromName}}"
                show-search="{{searchInfo.showSearch}}"
                datatype-id="{{searchInfo.dataTypeId}}"
                section="{{section}}">
            </umb-tree-search-box>
        </div>

        <umb-tree-search-results
            ng-if="searchInfo.showSearch"
            results="searchInfo.results"
            select-result-callback="selectResult">
        </umb-tree-search-results>

      <umb-empty-state ng-if="!hasItems && emptyStateMessage" position="center">
        {{ emptyStateMessage }}
      </umb-empty-state>

      <div ng-if="treeReady" ng-hide="searchInfo.showSearch" ng-animate="'tree-fade-out'">
            <umb-tree
                section="{{section}}"
                treealias="{{treeAlias}}"
                hideheader="{{hideHeader}}"
                hideoptions="true"
                isdialog="true"
                onlyinitialized="{{onlyInitialized}}"
                customtreeparams="{{customTreeParams}}"
                eventhandler="dialogTreeEventHandler"
                enablelistviewsearch="true"
                enablelistviewexpand="true"
                enablecheckboxes="{{multiPicker}}">
            </umb-tree>
        </div>

    </div>

    <umb-mini-list-view
        ng-if="miniListView"
        node="miniListView"
        entity-type="{{entityType}}"
        start-node-id="model.startNodeId"
        on-select="selectListViewNode(node)"
        on-close="closeMiniListView()"
        entity-type-filter="filter">
    </umb-mini-list-view>

</div>
