<div id="dual-list-Left" class="dual-list list-left col-xs-12 col-md-5-6 container">
	<div class="row">
		<div class="col-xs-2">
			<button (click)="toggleDtl = !toggleDtl; selectAll(toggleDtl);" class="btn btn-default no-style" title="Toggle select all">
				<span aria-hidden="true" class="glyphicon blue {{toggleDtl?  'glyphicon-check':  'glyphicon-unchecked'}}"></span>
			</button>
		</div>
		<div class="col-xs-7">
			<h5>{{header}}</h5>
		</div>
		<div class="pull-right">
			<button class="btn btn-default" type="button" id="collapsedMenufilterWb" aria-expanded="false" (click)="toolbarState=!toolbarState"
			 data-toggle="tooltip" title="Filter">
				<span class="glyphicon glyphicon-filter blue"></span>
			</button>
		</div>
	</div>
	<div [@toggleDown]="toolbarState" class="row">
		<taskana-filter class="col-xs-12" (performFilter)="performAvailableFilter($event)"></taskana-filter>
	</div>
	<taskana-spinner [isRunning]="requestInProgress" positionClass="centered-spinner" class="floating"></taskana-spinner>
	<div>
		<ul class="list-group">
			<li class="list-group-item" *ngFor="let distributionTarget of distributionTargets  | selectWorkbaskets: distributionTargetsSelected: side"
			 [class.selected]="distributionTarget.selected" type="text" (click)="distributionTarget.selected = !distributionTarget.selected">
				<div class="row">
					<dl class="col-xs-1">
						<taskana-icon-type class="vertical-align" [type]="distributionTarget.type"></taskana-icon-type>
					</dl>
					<dl class="col-xs-10">
						<dt>{{distributionTarget.name}},
							<i>{{distributionTarget.key}} </i>
						</dt>
						<dd>{{distributionTarget.description}} &nbsp;</dd>
						<dd>{{distributionTarget.owner}} &nbsp;</dd>
					</dl>
				</div>
			</li>
		</ul>
	</div>
</div>
