<div ng:controller="PageMainController" class="row-fluid" qn:fillheight>

    <div class="col10">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>
                    <span class="circle circle-small blue"><span class="icon li_cloud"></span></span>
                    {{$resource('pages.pages')}}
                </h3>
            </div>
            <div class="toolbar-group">
                <button ng:show="isSearch()" title="{{$resource('utility.reset')}}" class="button tooltip" ng:click="reset()"><i class="icon-angle-left"></i></button>
                <button title="{{$resource('utility.refresh')}}" class="button tooltip" ng:click="refresh()"><i class="icon-refresh"></i></button>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.new')}}" class="button lightblue tooltip" ng:click="new()"><i class="icon-plus"></i></button>
            </div>
            
            <div class="toolbar-group">
                <button ng:show="!isSearch()" title="{{$resource('utility.reorder')}}" class="button lightblue tooltip" ng:click="openReordering()"><i class="icon-sort"></i></button>
            </div>

            <div class="toolbar-group right">
                <button title="{{$resource('utility.settings')}}" class="button tooltip" ng:click="settings()"><i class="icon-cog"></i></button>
            </div>
            <div class="toolbar-group right">
                <input type="search" qn:enter="search()" ng:model="query.title" />
                <button title="{{$resource('utility.search')}}" class="button tooltip" ng:click="search()"><i class="icon-search"></i></button>
            </div>
        </div>
        <div class="table table-hover fillh">
            <table id="treeTable">
                <thead>
                    <tr>
                        <th class="icon"></th>
                        <th>{{$resource('pages.title')}}</th>
                        <th>{{$resource('pages.alias')}}</th>
                        <th>{{$resource('pages.template')}}</th>
                        <!--<th>Type</th>-->
                        <th class="command icon"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng:repeat="page in pages  | filter : Title" data-tt-id="{{page.ID}}" data-tt-parent-id="{{page.ParentID}}"  >
                        <td class="icon">
                            <div class="badges">
                                <div title="{{page.Status.DisplayName}}" class="circle status-{{page.Status.LowerName}}">
                                    <i ng:show="!page.IsRoot" class="icon-file-alt"></i>
                                    <i ng:show="page.IsRoot" class="icon-home"></i>
                                </div>
                            </div>
                        </td>
                        <td class="title">
                            <div class="inner" ng:click="content(page)">
                                <h2>{{page.Title}} <i ng:show="!page.AllowAnonymous" class="icon-lock"></i></h2>
                               <div class="info" title="tip(page.PageType.DisplayName)" />
                                {{tipstranice(page.PageType.DisplayName)}}
                               </div>
                            </div>
                        </td>
                        <td>{{page.Alias}}</td>
                        <td>{{page.Template}}</td>
                        <td class="command icon">
                            <span title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></span>
                            <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                <ul>
                                    <li><a ng:click="child(page.ID)"><i class="icon-plus"></i>{{$resource('pages.add_child')}}</a></li>
                                    <li><a ng:click="edit(page)"><i class="icon-list"></i>{{$resource('pages.properties')}}</a></li>
                                    <li><a ng:click="root(page)"><i class="icon-home"></i>{{$resource('pages.root')}}</a></li>
                                    <li><a ng:click="remove(page, $index)"><i class="icon-trash"></i>{{$resource('pages.delete')}}</a></li>
                                    <li><a ng:click="content(page)"><i class="icon-file"></i>{{$resource('pages.content')}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="col2 sidebar">
        <div class="toolbar toolbar-strip lightblue cfix">
            <div class="toolbar-group row-fluid">
                <button title="Search" class="button lightblue col3 right"><span class="icon li_search"></span></button>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav">
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('pages.all')}}</a></li>
                <li ng:class="{active:query.pageType==1}"><a ng:click="search({pageType:'1'}, true)"><i class="icon-file"></i>{{$resource('pages.standard')}}</a></li>
                <li ng:class="{active:query.pageType==2}"><a ng:click="search({pageType:'2'}, true)"><i class="icon-folder-open"></i>{{$resource('pages.group')}}</a></li>
                <li ng:class="{active:query.pageType==3}"><a ng:click="search({pageType:'3'}, true)"><i class="icon-external-link"></i>{{$resource('pages.external')}}</a></li>
                <li ng:class="{active:query.pageType==4}"><a ng:click="search({pageType:'4'}, true)"><i class="icon-bookmark"></i>{{$resource('pages.internal')}}</a></li>
                <li ng:class="{active:query.navigable=='true'}"><a ng:click="search({navigable:'true'}, true)"><i class="icon-angle-right"></i>{{$resource('pages.navigable')}}</a></li>
                <li ng:class="{active:query.navigable=='false'}"><a ng:click="search({navigable:'false'}, true)"><i class="icon-angle-right"></i>{{$resource('pages.not_navigable')}}</a></li>
                <li ng:class="{active:query.allowAnonymous=='false'}"><a ng:click="search({allowAnonymous:'false'}, true)"><i class="icon-lock"></i>{{$resource('pages.protected')}}</a></li>
                <li ng:class="{active:query.requiressl=='true'}"><a ng:click="search({requiressl:'true'}, true)"><i class="icon-angle-right"></i>{{$resource('pages.ssl')}}</a></li>
            </ul>
        </div>
    </div>
    <div qn:dialog="ui.reorderDialog">
        <div class="content">
            <div qn:jstree="treeOptions" qn:treeobject="treeObject" ng:model="strane">
                <ul>
                    <li ng-repeat="strana in strane" id="{{strana.ID}}">{{strana.Title}}</li>
                </ul>
            </div>
        </div>
        <div class="commands">
            <button class="button lightblue" ng:click="doneReordering()">{{$resource('pages.save')}}</button>
            {{$resource('pages.or')}}
            <button ng:click="cancelReordering()" class="button">{{$resource('pages.cancel')}}</button>
        </div>
    </div>
</div>
