<div class="card text-white mb-3">
	<div class="card-header bg-primary text-white py-1">Conflicts</div>

	<div class="card-body text-muted" ng-if="conflicts.length == 0">No conflicts</div>

	<table class="table table-sm" ng-if="conflicts.length > 0">
		
		<tr>
			<th style="width:40px" class="text-center">#1</th>
			<td><a href="javascript:location.reload()" title="{{org.id}}">{{org.name}}</a> <span class="badge badge-primary">current</span></td>
			<td style="width:250px"><img ng-src="resources/images/flags/{{org.country}}.gif" /> {{org.city || '-'}}, {{org.country}}</td>
			<td style="width:80px" class="text-right">{{org.type}}</td>
		</tr>
		
		<tr ng-repeat="sr in conflicts">
			<th style="width:40px" class="text-center">#{{$index+2}}</th>
			<td><a href="#!/edit/0/{{sr.id}}" title="{{sr.id}}">{{sr.name}}</a></td>
			<td style="width:250px"><img ng-src="resources/images/flags/{{sr.country}}.gif" /> {{sr.city || '-'}}, {{sr.country}}</td>
			<td style="width:80px" class="text-right">{{sr.type}}</td>
		</tr>
	</table>

	<div class="card-footer bg-secondary py-1">
		<button class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#addConflictModal">add</button>
		<div class="btn-group" ng-if="showButtons && conflicts.length > 0">
			<button class="btn btn-sm btn-primary" ng-click="prepareConflictsModal()" data-toggle="modal" data-target="#resolveConflictsModal">resolve manually</button>
			<button class="btn btn-sm btn-warning" ng-click="resolveConflicts(true)">merge all</button>
			<button class="btn btn-sm btn-danger" ng-click="resolveConflicts(false)">all different</button>
		</div>
	</div>
</div>

<resolve-conflicts-modal modal-id="resolveConflictsModal" orgs="candidateConflicts" selected-orgs="selectedConflicts" open-new-org="1"></resolve-conflicts-modal>

<select-org-modal modal-id="addConflictModal" selected-org="newConflict" filter-status="approved" on-select="addConflict()"></select-org-modal>
