<div id="leftcolumn" ng-controller="Umbraco.NavigationController"
     ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">

  <umb-sections sections="sections" ng-if="authenticated">
  </umb-sections>

  <!-- navigation container -->
  <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>

    <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6">

      <!-- the search -->
      <div ng-controller="Umbraco.SearchController" ng-if="authenticated">

        <!-- Search form -->
        <div id="search-form">
          <div class="umb-modalcolumn-header">

            <form class="form-search" novalidate>
              <i class="icon-search"></i>
              <input type="text"
                     hotkey="ctrl+space"
                     id="search-field"
                     ng-model="searchTerm"
                     class="umb-search-field search-query search-input"
                     localize="placeholder"
                     placeholder="@placeholders_search"
                     ng-keydown="navigateResults($event)" />
            </form>
          </div>
        </div>

        <!-- Search results -->
        <div id="search-results" class="umb-modalcolumn-body" ng-show="showSearchResults">

          <umb-load-indicator ng-if="isSearching"></umb-load-indicator>

          <umb-empty-state
            ng-if="!hasResults && !isSearching"
            position="center">
            <localize key="general_searchNoResult"></localize>
          </umb-empty-state>

          <ul class="umb-tree" ng-if="!isSearching && hasResults">
            <li class="root">
              <div>
                <h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
              </div>

              <div class="umb-search-group" ng-repeat="(key, group) in groups">
                <h6 class="umb-tree-header">{{key}}</h6>
                <ul>
                  <li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
                    <div class="umb-search-group-item">
                      <a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">

                        <div class="umb-search-group-item-name">
                          <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
                          {{result.name}}
                        </div>

                        <small class="search-subtitle" ng-show="result.subTitle">
                          {{result.subTitle}}
                        </small>
                      </a>

                      <a href  ng-hide="!result.menuUrl" ng-click="searchShowMenu($event, {node: result})" class="umb-options"><i></i><i></i><i></i></a>
                    </div>
                  </li>
                </ul>

              </div>

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

      </div>

      <!-- the tree -->
      <div id="tree" class="umb-modalcolumn-body" ng-if="authenticated">
        <umb-tree cachekey="_"
                  eventhandler="treeEventHandler"
                  section="{{currentSection}}">
        </umb-tree>
      </div>
    </div>

    <div class="offset6" id="navOffset" style="z-index: 10">

      <!-- The context menu -->
      <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-swipe-left="nav.hideMenu()" ng-show="showContextMenu" ng-animate="'slide'">
        <umb-context-menu menu-dialog-title="{{menuDialogTitle}}"
                          current-section="{{currentSection}}"
                          current-node="menuNode"
                          menu-actions="menuActions">
        </umb-context-menu>
      </div>


      <!-- Tree dialogs -->
      <div id="dialog" class='umb-modalcolumn fill shadow'
           ng-swipe-left="nav.hideDialog()"
           ng-show="showContextMenuDialog" ng-animate="'slide'">
        <div class='umb-modalcolumn-header'>
          <h1>{{menuDialogTitle}}</h1>
        </div>
        <div class='umb-modalcolumn-body'>
        </div>
      </div>
    </div>
  </div>

</div>
