<div ng:controller="ImagesMainController" class="row-fluid" id="body-main" qn:Fillheight="scrollOptions">
    <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('images.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" id="library-name" type="text" style="float: none" qn:blur="isEditMode = false" />
                        <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:show="isSearch()" ng:click="all()"><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.settings')}}" class="button tooltip" ng:click="goToSettings()"><i class="icon-cog"></i></button>
                <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 ng:show="isLibrary" ng:click="removeLibrary(query.libraryId)" title="{{$resource('utility.delete')}}" class="button tooltip"><i class="icon-trash"></i></button>
            </div>
            <div class="toolbar-group right">
                <button class="button" ng:class="{pink: isGrid}" ng:click="isGrid = true"><i class="icon-th"></i></button>
                <button class="button" ng:class="{pink: !isGrid}" ng:click="isGrid = false"><i class="icon-th-list"></i></button>
            </div>
        </div>
        <div class="fillh scroller">
            <div class="table table-hover" ng:show="isGrid == false" >
                <table ng:hide="!images.length">
                    <thead>
                        <tr>
                            <th class="icon"></th>
                            <th></th>
                            <th>{{$resource('images.title')}}</th>
                            <th>{{$resource('images.size')}}</th>
                            <th>{{$resource('images.extension')}}</th>
                            <th class="command icon"></th>
                        </tr>
                    </thead>
                    <tbody qn:sortable="sortableOptions" ng:Model="images">
                        <tr ng:repeat="image in images">
                            <td class="icon">
                                <img ng:src="/qusion/image/thumb/{{image.ID}}?width=50&tickts={{ticks}}"/>
                            </td>
                            <td class="ui-command-drag"><i class="icon-sort"></i></td>
                            <td class="title">{{image.Title}}</td>
                            <td>{{image.Width}}x{{image.Height}}</td>
                            <td>{{image.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(image)"><i class="icon li_star"></i>{{$resource('images.edit')}}</a></li>
                                        <li><a ng:click="remove(image.ID, $index)"><i class="icon-trash"></i>{{$resource('images.delete')}}</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div qn:sortable="sortableOptions" class="scroller" ng:Model="images">
                <div ng:repeat="image in images" class="col2" ng:show="isGrid">
                    <div class="thumbnail">
                        <a class="group1" qn:colorbox href="/qusion/image/photo/{{image.ID}}?width=600&extension={{image.Extension}}">
                            <img ng:src="/qusion/image/thumb/{{image.ID}}?width=200" alt="" />
                        </a>
                        <div>
                            <div class="title"><span ng:show="disableSort == false" class="ui-command-drag command"><i class="icon-move"></i></span> {{image.Width}}x{{image.Height}}</div>
                            <div class="commands">
                                <a title="{{$resource('utility.delete')}}" class="command tooltip" ng:click="remove(image.ID, $index)"><i class="icon-remove"></i></a>
                                <a title="{{$resource('images.edit')}}" class="command tooltip" ng:click="startEditDialog(image)"><i class="icon-edit"></i></a>
                            </div>
                            <div  class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align: center">
                <button ng:click="loadMore()" ng:Show="canLoadMore == true">{{$resource('images.more')}}</button>
            </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 col4 tooltip" ng:class="{active:sidebarView == 'basic'}" ng:click="switchSidebar('basic')"><i class="icon-star"></i></button>
                <button title="{{$resource('utility.tags')}}" class="button lightblue col4 tooltip" ng:class="{active:sidebarView == 'tags'}" ng:click="switchSidebar('tags')"><i class="icon-tag"></i></button>
                <button title="{{$resource('utility.other')}}" class="button lightblue col4 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('images.all')}}</a></li>
                <li ng:repeat="library in libraries | filter : searchLibraries" ng:class="{active: isCurrentLibrary(library)}"><a ng:click="lib(library)"><i class="icon-angle-right"></i>{{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('images.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="fomra">
            <p>{{$resource('images.title')}}<input type="text" name="Title" ng:Model="image.Title" /></p>
             <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>
            <input  type="hidden" name="ID" value="{{image.ID}}" />
            <input qn:upload="uploadOption" ng:Model="upload" id="editfile" type="file" name="file" data-url="/qusion/image/edit" />
           
            <p>{{$resource('images.warning')}}</p>
        </form>
        <div>
            <button class="btn lightblue" ng:click="startUpload()">{{$resource('images.save')}}</button> ili <button ng:Click="cancelEdit()" class="btn btn-link">{{$resource('images.cancel')}}</button>
        </div>
    </div>
</div>