<div class="subheader">
	<div class="fixed-container">
		<div class="btn-group pull-right">
			<button type="button" class="btn btn-default" ng-click="createProcess()" translate>PROCESS-LIST.ACTION.CREATE</button>
			<button type="button" class="btn btn-default" ng-click="importProcess()" translate>PROCESS-LIST.ACTION.IMPORT</button>
		</div>
		<h2>{{'PROCESS-LIST.TITLE' | translate}}</h2>
	</div>
</div>
<div class="container-fluid content" auto-height offset="40">
		<div class="col-xs-2 filter-wrapper">
			<div class="input-group">
				<span class="input-group-addon"> <i
					class="glyphicon glyphicon-search"></i>
				</span> <input type="text" ng-model="model.pendingFilterText" class="form-control" ng-change="filterDelayed()"
					placeholder="{{'PROCESS-LIST.SEARCH-PLACEHOLDER' | translate}}">
			</div>
			<ul class="filter-list">
				<li ng-repeat="filter in model.filters" ng-class="{'current' : filter.id == model.activeFilter.id}">
					<a ng-click="activateFilter(filter)">{{'PROCESS-LIST.FILTER.' + filter.labelKey | translate}}</a>
				</li>
			</ul>
		</div>

		<div class="col-xs-10 item-wrapper" id="list-items">
			<div class="dropdown-subtle pull-right">
				<div class="btn-group btn-group-sm" activiti-fix-dropdown-bug>
					<button type="button" class="btn btn-default dropdown-toggle"
						data-toggle="dropdown">{{'PROCESS-LIST.SORT.' + model.activeSort.labelKey | translate}} <i class="caret"></i></button>
					<ul class="dropdown-menu pull-right">
						<li ng-repeat="sort in model.sorts">
							<a ng-click="activateSort(sort)">{{'PROCESS-LIST.SORT.' + sort.labelKey | translate}}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="message clearfix">
				<div class="loading pull-left" ng-show="model.loading">
					<div class="l1"></div><div class="l2"></div><div class="l2"></div>
				</div>
				<div ng-if="!model.loading">
					<span ng-if="model.processes.size > 1">{{'PROCESS-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate:model.processes}}</span>
					<span ng-if="model.processes.size == 1">{{'PROCESS-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate}}</span>
					<span ng-if="model.processes.size > 0 && model.filterText !='' && model.filterText !== undefined">{{'PROCESS-LIST.FILTER.FILTER-TEXT' | translate:model}}</span>
					<span ng-if="model.processes.size == 0 && model.filterText !='' && model.filterText !== undefined">{{'PROCESS-LIST.FILTER.FILTER-TEXT-EMPTY' | translate:model}}</span>
				</div>
			</div>

            <div class="help-container fixed" ng-if="model.processes.size == 0 && (!model.filterText || model.filterText == '')">
                <div>
                    <div class="help-text wide">
                        <div class="description">
                            {{'PROCESS-LIST.FILTER.PROCESSES-EMPTY' | translate}}
                        </div>
                        <div class="help-entry" ng-click="createProcess()">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            <span translate="PROCESS-LIST.FILTER.PROCESSES-BPMN-HINT"></span>
                            <br>
                        </div>
						<div class="help-entry" ng-click="importProcess()">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            <span translate="PROCESS-LIST.FILTER.PROCESSES-BPMN-IMPORT-HINT"></span>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
			<div class="item fadein" ng-repeat="process in model.processes.data track by $index">
				<div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(process.id, imageVersion) + '\')'}" ng-click="showProcessDetails(process);">
					<div class="actions">
						<span class="badge">v{{process.version}}</span>
						<div class="btn-group pull-right">
							<button id="detailsButton" type="button" ng-click="showProcessDetails(process); $event.stopPropagation();" class="btn btn-default" title="{{'PROCESS.ACTION.DETAILS' | translate}}">
								<i class="glyphicon glyphicon-search"></i>
							</button>
							<button id="editButton" type="button" ng-click="editProcessDetails(process); $event.stopPropagation();" class="btn btn-default" title="{{'PROCESS.ACTION.OPEN-IN-EDITOR' | translate}}">
								<i class="glyphicon glyphicon-edit"></i>
							</button>
						</div>
					</div>
					<div class="details">
						<h3 class="truncate" title="{{process.name}}">
							{{process.name}}
						</h3>
						<div class="basic-details truncate">
							<span><i class="glyphicon glyphicon-user"></i> {{process.createdBy}}</span> <span title="{{process.lastUpdated | dateformat:'LLLL'}}"><i class="glyphicon glyphicon-pencil"></i> {{process.lastUpdated | dateformat}}</span>
						</div>
						<p>{{process.description}}</p>
					</div>
				</div>
			</div>

			<div class="show-more" ng-if="model.processes.data.length < model.processes.total">
				<a>{{'PROCESSES-LIST.ACTION.SHOW-MORE' | translate}}</a>
			</div>
		</div>
</div>