<div ng:controller="EventMainController" 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-flag"></span></span>
                    {{$resource('events.events')}}
                </h3>
            </div>
            <div class="toolbar-group">
                <button title="{{$resource('utility.reset')}}" class="button tooltip" ng:show="isSearch()" ng:click="reset()"><i class="icon-undo"></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('events.title')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Posjeta" ng:model="query.title"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('events.location')}}</label>
                            <div class="controls">
                                <input class="input-xlarge" placeholder="i.e. Laktaši" ng:model="query.location"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>{{$resource('events.starts_from')}}</label>
                            <input qn:datepicker="{dateFormat: 'd MM yy'}" class="col12" type="text" name="StartsOnFrom" ng:model="query.StartsOnFrom" />
                        </div>
                        <div class="control-group">
                            <label>{{$resource('events.starts_to')}}</label>
                            <input qn:datepicker="{dateFormat: 'd MM yy'}" class="col12" type="text" name="StartsOnTo" ng:model="query.StartsOnTo" />
                        </div>
                        <div class="control-group">
                            <label>{{$resource('events.ends_from')}}</label>
                            <input qn:datepicker="{dateFormat: 'd MM yy'}" class="col12" type="text" name="EndsOnFrom" ng:model="query.EndsOnFrom" />
                        </div>
                        <div class="control-group">
                            <label>{{$resource('events.ends_to')}}</label>
                            <input qn:datepicker="{dateFormat: 'd MM yy'}" class="col12" type="text" name="EndsOnTo" ng:model="query.EndsOnTo" />
                        </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="new()"><i class="icon-plus"></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 class="icon">&nbsp;</th>
                        <th>{{$resource('events.title')}}</th>
                        <th>{{$resource('events.starts')}}</th>
                        <th>{{$resource('events.ends')}}</th>
                        <th>{{$resource('events.location')}}</th>
                        <th class="number">{{$resource('events.num_of_participants')}}</th>
                        <th class="command"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng:repeat="event in events">
                        <td class="icon">
                            <div title="{{event.Status.DisplayName}}" class="circle status-{{event.Status.LowerName}}"><i class="icon-flag"></i></div>
                        </td>
                        <td class="title" ng:click="select(event)">
                            <div class="inner">
                                <h2>{{event.Title}}</h2>
                                <p class="info">{{event.CreatedBy}}</p>
                            </div>
                        </td>
                        <td>{{event.StartsOn | qdate}}</td>
                        <td>{{event.EndsOn | qdate}}</td>
                        <td>{{event.Location}}</td>
                        <td class="number">{{event.UserCount}}</td>
                        <td class="command icon">
                            <a title="{{$resource('utility.options')}}" class="trigger tooltip"><i class="icon-reorder"></i></a>
                            <div qn:popover="{position: {my: 'right top', at: 'left top'}}">
                                <ul>
                                    <li ng:click="edit(event)"><a><i class="icon icon-edit"></i>{{$resource('events.edit')}}</a></li>
                                    <li ng:click="remove(event, $index)"><a><i class="icon-trash"></i>{{$resource('events.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="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>