<div ng:controller="DocumentMainController" class="row-fluid" id="body-main" 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>
                    <span ng:show="isLibrary == false">{{$resource('documents.all')}}</span>
                    <span ng:show="isLibrary && isEditMode == false" ng:click="isEditMode = true">{{library.Title}}</span>
                    <span  ng:show="isEditMode == true">
                        <input ng:Model="library.Title" type="text" style="float: none" /> <button class="button" style="float: none"  ng:click="updateLibrary()"><i class="icon-ok"></i></button>
                    </span>
                </h3>
            </div>
            <div class="toolbar-group">
                <!--<button class="button"  ng:click="selectDocs()"><i class="icon-asterisk"></i></button>-->
                <button title="{{$resource('utility.delete')}}" class="button tooltip" ng:show="library" ng:click="removeLibrary(library.ID)" value="Are you sure?"><i class="icon-trash"></i></button>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.reset')}}" class="button tooltip" ng:show="isSearch()" ng:click="back()"><i class="icon-angle-left"></i></button>
                <button title="{{$resource('utility.search')}}" class="button tooltip" ng:click="filter()"><i class="icon-search"></i></button>
                <div class="form button-widget" qn:popover>
                    <form>
                        <div class="control-group">
                            <label>{{$resource('documents.file_name')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Wordpress" ng:model="query.FileName"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('documents.extension')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. pdf" ng:model="query.Extension"/>
                            </div>
                        </div>
                        <div class="control-group">
                              <label class="control-label"></label>
                            <div class="controls">
                                <button class="button lightblue" ng:click="search()"><i class="icon-search"></i></button>
                            </div>
                          </div>
                    </form>
                </div>
            </div>
            <div class="toolbar-group">
                <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="goToUpload()"><i class="icon-plus"></i></button>
            </div>
            <div class="toolbar-group right">
                <button title="{{$resource('utility.settings')}}" class="button tooltip" ng:click="goToSettings()"><i class="icon-cog"></i></button>  
            </div>
            <div class="toolbar-group right">
                <span class="info">{{pager.from}}-{{pager.to}} of {{pager.total}}</span>
                <button class="button" ng:disabled="!pager.canPrev()" ng:click="pager.prev()"><i class="icon-chevron-left"></i></button>
                <button class="button" ng:disabled="!pager.canNext()" ng:click="pager.next()"><i class="icon-chevron-right"></i></button>
            </div>
        </div>
        <!--<div class="empty-list" ng:show="!documents.length">
                <h2>No documents!</h2>
            </div>-->
        <div class="table table-hover fillh">
            <table class="">
                <thead>
                    <tr>
                        <th class="icon">&nbsp;</th>
                        <th>{{$resource('documents.file_name')}}</th>
                        <th>{{$resource('documents.created')}}</th>
                        <th>{{$resource('documents.path')}}</th>
                        <th>{{$resource('documents.extension')}}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng:Model="documents">
                    <tr ng:repeat="document in documents">
                        <td class="icon">
                            <span class="circle circle-small blue"><span class="icon li_note"></span></span>
                        </td>
                        <td><a rel="group" href="/document/download/{{document.ID}}">{{document.FileName}}</a></td>
                        <td>{{document.CreatedOn | qdate}}</td>
                        <td>{{document.FilePath}}</td>
                        <td>{{document.Extension}}</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="startEditDialog(document)"><i class="icon icon-edit"></i>{{$resource('documents.edit')}}</a></li>
                                    <li><a ng:click="remove(document.ID, $index)" value="Are you sure?"><i class="icon-trash"></i>{{$resource('documents.delete')}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--<div class="control-group ">
                <label class="control-label">Selector</label>
                <div class="controls">
                    <input type="text" qn:documentsSelector="DocumentSelectorOpiton" ng:Model="document.FileName"  />
                </div>
            </div>-->
        </div>
    </div>
       
    <div class="col2 sidebar">
        <div class="toolbar toolbar-strip lightblue cfix">
            <div class="toolbar-group row-fluid">
                <button title="{{$resource('utility.basic')}}" class="button lightblue col3 tooltip" ng:class="{active:sidebarView == 'basic'}" ng:click="switchSidebar('basic')"><i class="icon-star"></i></button>
                <button title="{{$resource('utility.tags')}}" class="button lightblue col3 tooltip" ng:class="{active:sidebarView == 'tags'}" ng:click="switchSidebar('tags')"><i class="icon-tag"></i></button>
                <button title="{{$resource('utility.other')}}" class="button lightblue col3 tooltip"><i class="icon-tasks"></i></button>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav" ng:show="sidebarView == 'basic'">
                <li class="search-box"><input ng:Model="searchLibraries" type="text" placeholder="Search libraries"/><i ng:show="searchLibraries.length > 0" ng:click="searchLibraries = ''" class="icon-remove clickabile"></i></li>
                <li ng:class="{active: !isSearch()}"><a ng:click="all()"><i class="icon-asterisk"></i>{{$resource('documents.all')}}</a></li>
                <li ng:repeat="library in libraries | filter : searchLibraries " ng:class="{active: isCurrentLibrary(library)}"><a  ng:click="selectLibrary(library.ID)">{{library.Title}}</a></li>
            </ul>
            <ul class="nav" ng:show="sidebarView == 'tags'">
                <li class="search-box"><input ng:Model="searchTags" type="text" placeholder="Search tags"/><i ng:show="searchTags.length > 0" ng:click="searchTags = ''" class="icon-remove clickabile"></i></li>
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('documents.all')}}</a></li>
                <li ng:class="{active:query.tag==tag.Alias}" ng:repeat="tag in classification.Labels | filter : searchTags"><a ng:click="search({tag: tag.Alias}, true)"><i class="icon-angle-right"></i>{{tag.Name}}</a></li>
            </ul>
        </div>
    </div>
    
    <div qn:dialog="ui.dialogEdit">
        <form name="forma">
            <h4>{{$resource('documents.warning')}}</h4><br />
            <p>{{$resource('documents.file_name')}}<input type="text" name="FileName" ng:Model="document.FileName" /></p>
            <input  type="hidden" name="ID" value="{{document.ID}}" />      
            <div class="control-group">
                <label class="control-label">{{classification.Name}}</label>
                <div class="controls">
                    <select qn:chosen multiple="multiple" ng:model="Labels[classification.Alias]" ng:options="label.ID as label.Name for label in classification.Labels"></select>
                </div>
            </div>
            <br/>
            <input qn:upload="uploadOption" ng:model="upload" id="editfile" type="file" name="file" data-url="/qusion/document/edit" />
        </form>
        <br/>
        <div>
            <button class="button lightblue" ng:click="startUpload()">{{$resource('documents.save')}}</button> &nbsp; <button ng:Click="cancelEdit()" class="button">{{$resource('documents.cancel')}}</button>
        </div>
    </div>
    
    <!-- Demonstracija selekcije -->
    <div qn:dialog="ui.dialogSelect" style="padding: 0">
        <div class="toolbar cfix">
            <div class="toolbar-group">
                <h3>{{$resource('documents.select')}}</h3>
            </div>
            <div class="toolbar-group right">
                <select ng:Model="selectedLibrary">
                    <option value="0" selected>{{$resource('documents.all_libraries')}}</option>
                    <option value="{{library.ID}}" ng:repeat="library in libraries">{{library.Title}}</option>
                </select>
            </div>
        </div>
        <div style="height: 400px; overflow: auto;">
            <ul  qn:selectror="{multipleSeletcion: false}"  ng:model="selectedIds" class="thumbnails">
                <li ng:repeat="document in documents" class="ui-state-default" style="padding: 5px">
                    <div style="height: 100px; width: 200px; overflow: hidden">
                        {{document.FileName}}
                    </div>
                </li>
                <li style="clear: both">
                    <button ng:click="loadMore()" ng:Show="canLoadMore == true">{{$resource('documents.more')}}</button>
                </li>
            </ul>
        </div>
        <div style="margin-top: 15px">
            <button class="button lightblue" ng:click="doneSelection()"><i class="icon-ok"></i> {{$resource('documents.save')}}</button> &nbsp; <button class="button" ng:click="cancelSeletion()">{{$resource('documents.cancel')}}</button>
        </div>
    </div>
    <!-- Kraj demonstracije -->
</div>