<div ng:controller="ArticleMainController" 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>
                    {{$resource('articles.news_and_articles')}}
                </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>
                <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('articles.title')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Touchpad support" ng:model="query.title"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('articles.author')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Nenad Jesic" ng:model="query.author"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('articles.created_on_from')}}</label>
                            <div class="controls cfix">
                                <input qn:datepicker="{dateFormat: 'd MM yy'}" class="input-date" type="text" name="CreatedOnFrom" ng:model="query.CreatedOnFrom" />
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('articles.created_on_to')}}</label>
                            <div class="controls cfix">
                                <input qn:datepicker="{dateFormat: 'd MM yy'}" class="input-date" type="text" name="CreatedOnTo" ng:model="query.CreatedOnTo" />
                            </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 right">
                <button title="{{$resource('utility.settings')}}" class="button tooltip" ng:click="settings()"><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 prev" ng:disabled="!pager.canPrev()" ng:click="pager.prev()"><i class="icon-chevron-left"></i></button>
                <button class="button next" ng:disabled="!pager.canNext()" ng:click="pager.next()"><i class="icon-chevron-right"></i></button>
            </div>
        </div>
        <div class="table table-hover fillh">
            <table>
                <thead>
                    <tr>
                        <th ng:click="sort('Status')" class="icon">&nbsp;</th>
                        <th ng:click="sort('Title')">{{$resource('articles.title')}}</th>
                        <th ng:click="sort('PublishedOn', 'Ascending')">{{$resource('articles.published')}}</th>
                        <th ng:click="sort('ExpiresOn', 'Ascending')">{{$resource('articles.expires')}}</th>
                        <th class="command icon">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng:repeat="article in articles | filter : Title">
                        <td class="icon">
                            <div title="{{article.Status.DisplayName}}" class="circle status-{{article.Status.LowerName}}"><i class="icon-file-alt"></i></div>
                        </td>
                        <td class="title" ng:click="edit(article)">
                            <div class="inner">
                                <h2>{{article.Title}}</h2>
                                <p class="info">{{article.Author}}</p>
                            </div>
                        </td>
                        <td><span><i class="icon-time"></i>{{article.PublishedOn | date}}</span></td>
                        <td><span ng:show="article.ExpiresOn"><i class="icon-time"></i>{{article.ExpiresOn | date}}</span></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="facebook(article)"><i class="icon-edit"></i>Facebook</a></li>
                                    <li><a ng:click="edit(article)"><i class="icon-edit"></i>{{$resource('articles.edit')}}</a></li>
                                    <li><a ng:click="remove(article)"><i class="icon-trash"></i>{{$resource('articles.delete')}}</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="{{$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.categories')}}" class="button lightblue col3 tooltip" ng:class="{active:sidebarView == 'categories'}" ng:click="switchSidebar('categories')"><i class="icon-tasks"></i></button>
                <button title="{{$resource('utility.other')}}" class="button lightblue col3 tooltip"><i class="icon-angle-down"></i></button>
            </div>
        </div>
        <div class="inner fillh">
            <ul class="nav" ng:show="sidebarView == 'basic'">
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('articles.all_news')}}</a></li>
                <li ng:class="{active:query.owner=='$'}"><a ng:click="search({owner:'$'}, true)"><i class="icon-user"></i>{{$resource('articles.my_news')}}</a></li>
                <li ng:class="{active:query.statuses==1}"><a ng:click="search({statuses:'1'}, true)"><i class="icon-angle-right status-pending"></i>{{$resource('articles.pending_news')}}</a></li>
                <li ng:class="{active:query.statuses==2}"><a ng:click="search({statuses:'2'}, true)"><i class="icon-angle-right status-live"></i>{{$resource('articles.live_news')}}</a></li>
                <li ng:class="{active:query.statuses==0}"><a ng:click="search({statuses:'0'}, true)"><i class="icon-angle-right status-draft"></i>{{$resource('articles.drafts')}}</a></li>
                <li ng:class="{active:query.statuses==3}"><a ng:click="search({statuses:'3'}, true)"><i class="icon-angle-right status-archived"></i>{{$resource('articles.archived')}}</a></li>
                <li ng:class="{active:query.scheduled}"><a ng:click="search({scheduled:true}, true)"><i class="icon-time"></i>{{$resource('articles.scheduled')}}</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('articles.all_news')}}</a></li>
              <!--  <li ng:class="{active:query.tag==tag.Alias}" ng:repeat="tag in tags.Labels | filter : searchTags"><a ng:click="search({Tag: tag.Alias}, true)"><i class="icon-angle-right" style="background:{{tag.Color}}"></i>{{tag.Name}}</a></li>-->
            </ul>
            <ul class="nav" ng:show="sidebarView == 'categories'">
                <li class="search-box"><input ng:Model="searchCategories" type="text" placeholder="Search categories"/><i ng:show="searchCategories.length > 0" ng:click="searchCategories = ''" class="icon-remove clickabile"></i></li>
                <li ng:class="{active:!isSearch()}"><a ng:click="reset()"><i class="icon-asterisk"></i>{{$resource('articles.all_news')}}</a></li>
                <li ng:class="{active:query.category==category.Alias}" ng:repeat="category in categories.Labels | filter : searchCategories"><a ng:click="search({Category: category.Alias}, true)"><i class="icon-angle-right" style="background:{{category.Color}}"></i>{{category.Name}}</a></li>
            </ul>
        </div>
    </div>
</div>