<div class="panel panel-default project-explorer">
  <div class="panel-body">
    <ui-select ng-model="$ctrl.selectedItem" on-select="$ctrl.selectItem()">
      <ui-select-match placeholder="{{'common_select_or_search' | translate}}...">
        <span class="project-explorer-select">{{$select.selected.name}}</span>
      </ui-select-match>
      <ui-select-choices group-by="'family'" 
        repeat="item in $ctrl.items | filter: $select.search">
        <span ng-bind-html="item.name | highlight: $select.search"></span>
      </ui-select-choices>
    </ui-select>
    <hr>
    <div>
      <projectexplorersimpletext ng-if="$ctrl.type == 'simpletext'" 
        sectiontitle="$ctrl.sectiontitle"
        images="$ctrl.images"
        path="{{$ctrl.path}}"
        text="$ctrl.text">
      </projectexplorersimpletext>
      <projectexplorerstrands ng-if="$ctrl.type == 'strands'" strands="$ctrl.strands">
      </projectexplorerstrands>
      <projectexplorerchapter ng-if="$ctrl.type == 'chapter'" 
        chapter="$ctrl.chapter" scenes="$ctrl.scenes">
      </projectexplorerchapter>
      <projectexplorermaincharacter ng-if="$ctrl.type == 'maincharacter'"
        maincharacter="$ctrl.maincharacter">
      </projectexplorermaincharacter>
    </div>
  </div>
</div>