<div class="modal fade" id="{{modalId}}" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Resolve conflicts</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body" style="min-height: 300px">
				<div class="row">
					<div class="col-6">
						<div class="card border-primary">
							<div class="card-header text-white bg-primary">Organizations</div>
							<div class="card-body" ng-repeat="o in orgs | filter:{show:'secondary'}" ng-class="{'pb-0' : $index==0 , 'py-0' : $index > 0 }">
								<org-details org="o" org-title="{{o.id}}" show="{{o.show}}"></org-details>
								<div class="text-right mb-3">
									<button type="button" class="btn btn-sm btn-primary" ng-click="selectOrg(o)">select >></button>
								</div>
							</div>
							<div class="card-body text-secondary text-center" ng-show="selectedOrgs.length == orgs.length">no organization(s)</div>
						</div>
					</div>
					<div class="col-6">
						<div class="card border-primary">
							<div class="card-header text-white bg-primary">New group</div>
								<div class="card-body" ng-repeat="o in selectedOrgs" ng-class="{'pb-0' : $index==0 , 'py-0' : $index > 0 }">
									<org-details org="o" org-title="{{($index==0)?'Main organization':'Secondary organization ' + $index}}" show="{{o.show}}"></org-details>
								</div>
								<div class="card-body" ng-show="selectedOrgs.length == 0">
									<div class="card border-secondary">
										<div class="card-body text-secondary text-center">select main organization</div>
									</div>
								</div>
								<div class="card-body pt-0" ng-show="selectedOrgs.length == 1">
									<div class="card border-secondary">
										<div class="card-body text-secondary text-center">select secondary organization(s)</div>
									</div>
								</div>
								<div class="card-footer" ng-show="selectedOrgs.length > 0">
									<button type="button" class="btn btn-sm btn-secondary" ng-click="reset()" ng-show="selectedOrgs.length > 0">reset</button>
									<div class="btn-group float-right" ng-show="selectedOrgs.length > 1">
										<button type="button" class="btn btn-sm btn-danger" ng-click="invalidateGroup()" ng-show="selectedOrgs.length == orgs.length">all different</button>
										<button type="button" class="btn btn-sm btn-primary" ng-click="mergeGroup()">merge</button>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
