<div class="ng-cloak">
  <div class="profile-list">
    <div class="profile-selector-item" ng-show="showFilter">
      <!--
      <div class="profile-selector-checkbox">
        <input id="selector" type="checkbox" ng-model="selectedAll">
      </div>
      -->
      <div class="profile-selector-name">
        <input type="text" class="search-query" ng-model="filterText" placeholder="Filter...">
      </div>
    </div>
    <ul>
      <li class="no-list profile-selector-folder" ng-repeat="branch in tree" ng-show="showBranch(branch)">
        <div class="expandable" ng-class="isOpen(branch)">
          <div title="{{branch.path}}" class="title">
            <i class="expandable-indicator folder"></i> <span class="folder-title" ng-show="branch.path">{{branch.path.capitalize(true)}}</span><span class="folder-title" ng-hide="branch.path">Uncategorized</span>
          </div>
          <div class="expandable-body">
            <ul>
              <li class="no-list profile" ng-repeat="profile in branch.profiles" ng-show="showProfile(profile)">

                <!-- abstract profile -->
                <div class="profile-selector-item" ng-show="profile.abstract">
                  <div class="inline-block profile-selector-checkbox">
                    <input ng-hide="useCircles" type="checkbox" ng-model="profile.selected" disabled="true">
                    <div ng-show="useCircles">
                      <i ng-show="!profile.selected" class="icon-circle-blank clickable" title="Not selected" ng-click="profile.selected = true"></i>
                      <i ng-show="profile.selected" class="icon-circle clickable" title="Selected" ng-click="profile.selected = false"></i>
                    </div>
                  </div>
                  <div class="inline-block profile-selector-name" ng-class="getSelectedClass(profile)">
                    <span class="contained c-max" ng-hide="!profile.abstract">
                      <span ng-show="noLinks" title="The profile is abstract and not selectable"><i class="icon-book green"></i> {{profile.name}}</span>
                      <a ng-hide="noLinks" href="" ng-click="goto(profile)" title="Details for {{profile.id}}"><i class="icon-book green"></i> {{profile.name}}</a>
                    </span>
                  </div>
                </div>

                <!-- regular profile -->
                <div class="profile-selector-item" ng-show="!profile.abstract">
                  <div class="inline-block profile-selector-checkbox">
                    <input ng-hide="useCircles" type="checkbox" ng-model="profile.selected">
                    <div ng-show="useCircles">
                      <i ng-show="!profile.selected" class="icon-circle-blank clickable" title="Not selected" ng-click="profile.selected = true"></i>
                      <i ng-show="profile.selected" class="icon-circle clickable" title="Selected" ng-click="profile.selected = false"></i>
                    </div>
                  </div>
                  <div class="inline-block profile-selector-name" ng-class="getSelectedClass(profile)">
                    <span class="contained c-max">
                      <span ng-show="noLinks" ng-click="profile.selected = !profile.selected" style="cursor: pointer;"><i class="icon-book green"></i> {{profile.name}}</span>
                      <a ng-hide="noLinks" href="" ng-click="goto(profile)" title="Details for {{profile.id}}"><i class="icon-book green"></i> {{profile.name}}</a>
                    </span>
                  </div>
                </div>

              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
