<div class="container" >
    <div class="row">
        <div class="col-md-9">
            <div class="component">
                <div class="title">
                    <div class="btn-group btn-group-sm pull-right">
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    translate="GENERAL.ACTION.SHOW-RESULTS" translate-value-size="{{'GENERAL.RESULT-SIZES.' + filter.resultSize | translate}}">
                                &nbsp;
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                            	<li ng-repeat="resultSize in config.filter.resultSizes"><a href="" ng-click="filter.setResultSize(resultSize)">{{'GENERAL.RESULT-SIZES.' + resultSize.toString() | translate}}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-default" ng-click="filter.toggleOrder()">
                        	<i class="glyphicon" ng-class="{'glyphicon-sort-by-attributes': filter.order == 'asc', 'glyphicon-sort-by-attributes-alt': filter.order == 'desc'}"></i>
                        </button>
                    </div>
                    <div class="btn-group btn-group-sm pull-right">
                    	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                translate="GENERAL.ACTION.SORT-BY" translate-value-sort="{{filter.sort.name | translate}}">
                            &nbsp;
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                           <li ng-repeat="sort in filter.sortObjects"><a href="" ng-click="filter.setSort(sort)">{{sort.name | translate}}</a></li>
                        </ul>
                    </div>
                    <div class="btn-group btn-group-sm pull-right">
                        <a class="btn btn-default" role="button"
                           title="{{'GENERAL.ACTION.REFRESH-LIST' | translate}}"
                           ng-click="filter.refresh();">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                    </div>
                    <div class="pull-right loading" ng-show="filter.loading">
                    	<i class="glyphicon glyphicon-refresh"></i>
                    </div>

                    <h2 translate="TASKS.TITLE"></h2>
                </div>

                <div class="grid-wrapper" id="process-instances">
                    <div class="grid-message" ng-if="taskData.size > 0">
                        <span>{{'TASKS.LIST-MESSAGE' | translate:taskData}}</span>
                    </div>
                     <div class="grid-message" ng-if="taskData.size == 0">
                        <span>{{'TASKS.LIST-MESSAGE-EMPTY' | translate}}</span>
                    </div>
                    <div ng-grid="gridDefinitions" class="gridStyle" ng-if="gridDefinitions && taskData.data" />
                </div>
            </div>
        </div>

		<!-- Task filters -->
		<div class="col-md-3">
            <div class="component tip-left">
                <div class="title">
                    <div class="btn-group btn-group-sm pull-right" ng-show="filter.supportedProperties.length > 0">
                        <button type="button" class="btn btn-default" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-plus"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="prop in filter.supportedProperties"><a href="" ng-click="addFilterProperty(prop)">{{prop.name | translate}}</a></li>
                        </ul>
                    </div>
                   <div class="pull-right">
                        <a class="action" ng-click="clearFilters()" translate="GENERAL.ACTION.CLEAR-FILTERS"></a>
                    </div>
                    <h2 translate="GENERAL.TITLE.FILTERS"></h2>
                </div>
                <div class="section" ng-if="filter.properties.finished !== undefined">
                    <div class="subtitle"><label for="filter-finished" translate="TASKS.FILTER.STATUS"></label> </div>
                    <div class="input-group input-group-sm" id="filter-state">
                       <div class="btn-group btn-group-sm">
                    	<button type="button" id="filter-finished" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
                            <span class="pull-right">
                            	<span class="caret"></span>
                            </span>
                    		{{filter.getLabelForOption('finished') | translate}}
                        </button>
                    	<ul class="dropdown-menu">
                            <li ng-repeat="state in filter.options.finished"><a href="" ng-click="filter.selectOption('finished', state)">{{state.name | translate}}</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.taskNameLike !== undefined">
                    <div class="subtitle"><label for="filter-taskNameLike" translate="TASKS.FILTER.NAME"></label> </div>
                    <div class="input-group input-group-sm">
                        <input id="filter-taskNameLike" type="text" class="form-control" value="" ng-model="filter.properties.taskNameLike" ng-change="filter.refreshDelayed()">
                    </div>
                </div>

                <div class="seperator"></div>
                <!-- People filtering -->
                <div class="section" ng-if="filter.properties.taskAssignee !== undefined">
                    <div class="subtitle"><label for="filter-taskAssignee"><span class="glyphicon glyphicon-user"></span> {{'TASKS.FILTER.ASSIGNEE' | translate}}</label> </div>
                    <div class="input-group input-group-sm type-ahead-scrollable">
                    	<input id="filter-taskAssignee" type="text" users-typeahead user-model="filter.properties.taskAssignee" user-display-model="assigneeFilter" user-on-change="filter.refreshDelayed()" class="form-control">
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.taskOwner !== undefined">
                    <div class="subtitle"><label for="filter-taskOwner"><span class="glyphicon glyphicon-user"></span> {{'TASKS.FILTER.OWNER' | translate}}</label> </div>
                    <div class="input-group input-group-sm type-ahead-scrollable">
                    	<input id="filter-taskOwner" type="text" users-typeahead user-model="filter.properties.taskOwner" user-display-model="ownerFilter" user-on-change="filter.refreshDelayed()" class="form-control">
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.parentTaskId !== undefined">
                    <div class="subtitle"><label for="filter-parentTaskId" translate="TASKS.FILTER.PARENT-TASK-ID"></label> </div>
                    <div class="input-group input-group-sm">
                        <input id="filter-parentTaskId" type="text" class="form-control" value="" ng-model="filter.properties.parentTaskId" ng-change="filter.refreshDelayed()">
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.caseInstanceId !== undefined">
                    <div class="subtitle"><label for="filter-caseInstanceId" translate="TASKS.FILTER.CASE-INSTANCE-ID"></label> </div>
                    <div class="input-group input-group-sm">
                        <input id="filter-caseInstanceId" type="text" class="form-control" value="" ng-model="filter.properties.caseInstanceId" ng-change="filter.refreshDelayed()">
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.tenantIdLike !== undefined">
                    <div class="subtitle"><label for="filter-tenantid">{{'TASKS.FILTER.TENANT-ID' | translate}}</label> </div>
                    <div class="input-group input-group-sm">
                        <input id="filter-tenantid" type="text" class="form-control" value="" ng-model="filter.properties.tenantIdLike" ng-change="filter.refreshDelayed()">
                    </div>
                </div>
                <!-- Date filtering -->
                <div class="section" ng-if="filter.properties.dueBefore !== undefined">
                  <div class="subtitle"><label for="filter-dueBefore" translate="TASKS.FILTER.DUE-BEFORE"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-dueBefore" type="text" class="form-control" ng-model="filter.properties.dueDateBefore"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="dueBeforePicker.isOpen" ng-click="dueBeforePicker.isOpen=true"/>
	              </div>
	            </div>
                <div class="section" ng-if="filter.properties.dueAfter !== undefined">
	              <div class="subtitle"><label for="filter-dueAfter" translate="TASKS.FILTER.DUE-AFTER"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-dueAfter" type="text" class="form-control" ng-model="filter.properties.dueDateAfter"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="dueAfterPicker.isOpen" ng-click="dueAfterPicker.isOpen=true"/>
	              </div>
	            </div>

	            <div class="section" ng-if="filter.properties.taskCreatedBefore !== undefined">
                  <div class="subtitle"><label for="filter-taskCreatedBefore" translate="TASKS.FILTER.CREATED-BEFORE"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-taskCreatedBefore" type="text" class="form-control" ng-model="filter.properties.taskCreatedBefore"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="createdBeforePicker.isOpen" ng-click="createdBeforePicker.isOpen=true"/>
	              </div>
	            </div>
                <div class="section" ng-if="filter.properties.taskCreatedAfter !== undefined">
	              <div class="subtitle"><label for="filter-taskCreatedAfter" translate="TASKS.FILTER.CREATED-AFTER"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-taskCreatedAfter" type="text" class="form-control" ng-model="filter.properties.taskCreatedAfter"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="createdAfterPicker.isOpen" ng-click="createdAfterPicker.isOpen=true"/>
	              </div>
	            </div>

	            <div class="section" ng-if="filter.properties.taskCompletedBefore !== undefined">
                  <div class="subtitle"><label for="filter-taskCompletedBefore" translate="TASKS.FILTER.ENDED-BEFORE"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-taskCompletedBefore" type="text" class="form-control" ng-model="filter.properties.taskCompletedBefore"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="completedBeforePicker.isOpen" ng-click="completedBeforePicker.isOpen=true"/>
	              </div>
	            </div>
                <div class="section" ng-if="filter.properties.taskCompletedAfter !== undefined">
	              <div class="subtitle"><label for="filter-taskCompletedAfter" translate="TASKS.FILTER.ENDED-AFTER"></label> </div>
               	  <div class="input-group input-group-sm">
               	  	<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	              	<input id="filter-taskCompletedAfter" type="text" class="form-control" ng-model="filter.properties.taskCompletedAfter"
                           ng-change="filter.refreshDelayed()"
                           datepicker-popup="dd/MM/yyyy"
                           is-open="completedAfterPicker.isOpen" ng-click="completedAfterPicker.isOpen=true"/>
	              </div>
	            </div>

	            <div class="section clearfix" ng-repeat="varFilter in filter.properties.taskVariables">
	              <div class="seperator" ng-if="$index > 0"></div>
	              <div class="subtitle"><label translate="TASKS.FILTER.TASK-VARIABLE"></label> </div>
               	  <div class="inline-button input-group-sm">
	              		<div class="pull-right btn-group">
	                        <button ng-disabled="varFilter.type.id == 'boolean'" tabindex="-1" type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
	                             {{varFilter.operator.sign}} <i class="caret"></i>
	                        </button>
	                        <ul class="dropdown-menu">
	                            <li><a href="" ng-click="setVariableFilterOperator(varFilter, operator)" ng-repeat="operator in variableFilterOperators">{{operator.name}}</a></li>
	                        </ul>
	                    </div>
	              		<input id="filter-taskVariables-name-{{$index}}" type="text" class="form-control" ng-model="varFilter.name" ng-change="filter.refreshDelayed()" placeholder="{{'TASKS.FILTER.VARIABLE-NAME' | translate}}" />
	              </div>
               	  <div class="inline-button wide input-group-sm" >
	              		<div class="pull-right btn-group">
	                        <button tabindex="-1" ng-disabled="varFilter.operator.id == 'like'" type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
	                           {{varFilter.type.name}} <i class="caret"></i>
	                        </button>
	                        <ul class="dropdown-menu">
	                            <li><a href="" ng-click="setVariableFilterType(varFilter, type)" ng-repeat="type in variableFilterTypes" >{{type.name}}</a></li>
	                        </ul>
	                    </div>
	              		<input ng-if="varFilter.type.id != 'date' && varFilter.type.id != 'boolean'" id="filter-taskVariables-value-{{$index}}" type="text" class="form-control" ng-model="varFilter.value" ng-change="filter.refreshDelayed()" placeholder="{{'TASKS.FILTER.VARIABLE-VALUE' | translate}}" />
	              		<input ng-if="varFilter.type.id == 'date'" id="filter-taskVariables-value-{{$index}}" type="text" class="form-control" ng-model="varFilter.value"
                               ng-change="filter.refresh()"
                               datepicker-popup="dd/MM/yyyy"
                               is-open="varValuePicker.isOpen" ng-click="varValuePicker.isOpen=true"/>
	              		<div class="checkbox" ng-if="varFilter.type.id == 'boolean'">
						    <label>
						      <input type="checkbox" ng-change="filter.refresh()" ng-model="varFilter.value">{{'TASKS.FILTER.VARIABLE-BOOLEAN-VALUE' | translate:varFilter}}
						    </label>
  						</div>
	              </div>
	            </div>
            </div>
        </div>
    </div>
</div>
