<h3 translate  class="modalTitle">elastic.search.jointure.title</h3>          

<div style="padding:20px 20px 0px 20px;max-height:520px;overflow-y:auto;">
    <div class="collapseMenu">	
	<div class="panel-group" ng-model="panel.activePanel" data-animation="am-flip-x" data-start-collapsed="$index === 0" style="margin-bottom:5px;" bs-collapse>
	    <div class="panel panel-primary" ng-repeat="el in relationdashbord" >
		<div class="panel-heading">
		    <h4 class="panel-title">
			<a bs-collapse-toggle><translate class="txt-title">
			    <strong> {{ 'elastic.search.jointure.group' | translate }} {{ $index + 1 }} : {{ ("features." + el.fti.name + ".alias" | translate).indexOf("features.") === -1 ?
				    ("features." + el.fti.name + ".alias" | translate) : el.fti.alias }}
			    </strong>
			</a>
		    </h4>
		</div>
		<div  class="panel-collapse collapse" bs-collapse-target>
		    <div class="panel-body">
			<div class="row">
			    <div class="btn-group col-md-2" style="padding-top:45px;padding-right:0px;margin-top:10px;margin-bottom:10px;">    		
				<button type="button" ng-click="selectallattributes(el)"
					class="btn btn-default btn-xs" title="{{ 'elastic.search.jointure.selectAll' | translate }}">
				    <i class="fa fa-arrow-circle-right"></i>
				</button>
				 <button type="button" ng-click="removeallattributes(el)"
					class="btn btn-default btn-xs" title="{{ 'elastic.search.jointure.removeall' | translate }}">
				    <i class="fa fa-remove"></i>
				</button>
			    </div>
			    <div class="col-md-5" style="padding-top:45px;padding-left:0px;padding-right:0px;margin-top:10px;margin-bottom:10px;">
				<label>{{ 'elastic.search.jointure.attributestoshow' | translate }}</label>
			    </div>
			    <div class="col-md-5 form-control"
				 style="height:120px;width:210px;overflow-x:hidden;overflow-y:auto;padding-left:0px;margin-top:10px;margin-bottom:10px;">
				<ul>
				    <li class="checkbox col-md-12" ng-repeat="attr in el.fti.attributes | orderBy : 'alias'"
					style="display:inline-block;min-height:20px;max-height:40px;width:220px;padding:0px;" > 
					<input type="checkbox"  ng-model="attr.selected" />
					<span>{{ attr.alias }}</span>
				    </li> 
				</ul>
			    </div>
			</div>
			
			<div class="row">
			    <div elastic-mjointure el="el"></div>
			</div>
		    </div>
		</div>
	    </div>	
	</div>	
    </div>
</div>

<div class="row" style="margin-bottom:20px;padding-left: 20px;padding-right:20px;">
    <div class="col-xs-12 text-right" style="margin-bottom:15px;">
	<hr/>
	<div class="btn btn-primary"  ng-click="confirm()">ok</div>
    </div>
</div>