  <div ng:controller="BlogMainController" 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 icon-book"></span></span>
                      {{$resource('blogs.blogs')}}
                  </h3>
              </div>
              <div class="toolbar-group">
                  <button title="{{$resource('utility.reset')}}" class="button tooltip" ng:show="isSearch()" ng:click="reset()"><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('blogs.title')}}</label>
                              <div class="controls">
                                  <input class="input-xlarge" placeholder="i.e. Wordpress" ng:model="query.title"/>
                              </div>
                          </div>
                          <div class="control-group">
                              <label>{{$resource('blogs.description')}}</label>
                              <div class="controls">
                                  <input class="input-xlarge" ng:model="query.summary"/>
                              </div>
                          </div>
                          <div class="control-group">
                              <label>{{$resource('blogs.status')}}</label>
                              <div class="controls">
                                  <select 
                                      ng:model="query.Statuses" 
                                      name="Statuses" 
                                      ng:options="status.id as status.title for status in statuses" 
                                      multiple>
                                      <option></option>
                                  </select>
                              </div>
                          </div>
                          <div class="control-group">
                              <label>{{$resource('blogs.published_on_from')}}</label>
                              <input qn:datepicker="{dateFormat: 'dd-M-y'}" class="col12" type="text" name="PublishedOnFrom" ng:model="query.PublishedOnFrom" />
                          </div>
                          <div class="control-group">
                              <label>{{$resource('blogs.published_on_to')}}</label>
                              <input qn:datepicker="{dateFormat: 'dd-M-y'}" class="col12" type="text" name="PublishedOnTo" ng:model="query.PublishedOnTo" />
                          </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 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 class="toolbar-group">
                  <button title="{{$resource('utility.new')}}" class="button lightblue tooltip"><i class="icon-plus"></i></button>
                  <div qn:popover class="button-widget">
                      <form name="NewBlog" class="cfix">
                          <div class="control-group required">
                              <label class="control-label">{{$resource('blogs.title')}}</label>
                              <div class="controls">
                                  <input type="text" placeholder="Title"  name="Title" ng:model="newBlog.Title" required />
                                  <div ng:show="errors['newBlog.Title'][0]" class="error">{{$resource(errors['newBlog.Title'][0])}}</div>
                              </div>
                          </div>
                          <div class="control-group required">
                              <label class="control-label">{{$resource('blogs.alias')}}</label>
                              <div class="controls">
                                  <input type="text" placeholder="Alias" qn:Alias="newBlog.Title" name="Alias" ng:model="newBlog.Alias" required />
                                  <div ng:show="errors['newBlog.Alias'][0]" class="error">{{$resource(errors['newBlog.Alias'][0])}}</div>
                              </div>
                          </div>
                          <div class="control-group required">
                              <label class="control-label">{{$resource('blogs.description')}}</label>
                              <div class="controls">
                                  <textarea name="Summary" ng:model="newBlog.Summary" required></textarea>
                                  <div ng:show="errors['newBlog.Summary'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['newBlog.Summary'][0])}}</div>
                              </div>
                          </div>
                          <div class="control-group">
                              <label class="control-label">&nbsp;</label>
                              <div class="controls">
                                  <button type="button" ng:click="create()" class="button lightblue">{{$resource('blogs.create')}}</button>
                              </div>
                          </div>
                      </form>
                  </div>
              </div>
          </div>
          <div class="table table-hover fillh">
              <table>
                  <thead>
                      <tr>
                          <th class="icon">&nbsp;</th>
                          <th>{{$resource('blogs.title')}}</th>
                          <th>{{$resource('blogs.description')}}</th>
                          <th>{{$resource('blogs.published')}}</th>
                          <th class="number">{{$resource('blogs.number_of_posts')}}</th>
                          <th class="command"></th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr ng:repeat="blog in blogs">
                          <td class="icon">
                              <div title="{{blog.Status.DisplayName}}" class="circle status-{{blog.Status.LowerName}}"><i class="icon icon-book"></i></div>
                          </td>
                          <td class="title" ng:click="select(blog)">
                              <div class="inner">
                                  <h2>{{blog.Title}}</h2>
                                  <p class="info">{{blog.CreatedBy}}</p>
                              </div>
                          </td>
                          <td>{{blog.Summary}}</td>
                          <td>{{blog.PublishedOn | date}}</td>
                          <td class="number">{{blog.PostsCount}}</td>
                          <td class="command icon">
                              <a title="{{$resource('utility.options')}}" class="button tooltip" class="trigger"><i class="icon-reorder"></i></a>
                              <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                  <ul>
                                      <li ng:click="remove(blog, $index)"><a><i class="icon-trash"></i>{{$resource('blogs.delete')}}</a></li>
                                      <li ng:click="updateBlog(blog)"><a><i class="icon-edit"></i>{{$resource('blogs.edit')}}</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="Classifications" class="button lightblue col4" ng:class="{active:sidebarView == 'classifications'}" ng:click="switchSidebar('classifications')"><i class="icon-star"></i></button>
                  <button class="button lightblue col4"><i class="icon-tag"></i></button>
                  <button class="button lightblue col4"><i class="icon-tasks"></i></button>
              </div>
          </div>
      </div>
      <div qn:dialog="ui.dialogUpdateBlog">
          <div>
              <form class="form-horizontal" name="UpdateBlog">
                  <div class="control-group required">
                      <label class="control-label">{{$resource('blogs.title')}}</label>
                      <div class="controls">
                          <input class="input-medium" type="text" name="Title" ng:model="blog.Title" required/>
                          <div ng:show="errors['blog.Title'][0]" class="error">{{$resource(errors['blog.Title'][0])}}</div>
                      </div>
                  </div>
                  <div class="control-group required">
                      <label class="control-label">{{$resource('utility.alias')}}</label>
                      <div class="controls">
                          <input type="text" placeholder="Alias" name="Alias" ng:model="blog.Alias" required />
                          <div ng:show="errors['blog.Alias'][0]" class="error">{{$resource(errors['blog.Alias'][0])}}</div>
                      </div>
                  </div>

                  <div class="control-group required">
                      <label class="control-label">{{$resource('blogs.summary')}}</label>
                      <div class="controls">
                          <textarea class="span5" rows="3" type="text" name="Summary" ng:model="blog.Summary" required></textarea>
                          <div ng:show="errors['blog.Summary'][0]" style="display: block; clear: both; color: red; padding: 10px 0 0;">{{$resource(errors['blog.Summary'][0])}}</div>
                      </div>
                  </div>
              </form>
          </div>
          <div class="control-group commands">
              <label class="control-label">&nbsp;</label>
              <div class="controls">
                  <button type="button" ng:click="edit()" class="button lightblue">{{$resource('blogs.save')}}</button> &nbsp; <button class="button" ng:click="cancelUpdate()">{{$resource('blogs.cancel')}}</button>
              </div>
          </div>
      </div>
  </div>