<h2>Duplicates</h2>

<div class="row mt-3 mb-3">
	<div class="col">
		<div class="input-group input-group-sm">
		    <div class="input-group-append">
		    	<span class="input-group-text text-outline-primary">Current country:</span>
		        <button class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown">{{country}}</button>
				<div class="dropdown-menu">
					<small>
						<a class="dropdown-item" href="#!/duplicates/{{c.code}}" 
							ng-repeat="c in info.data.byCountry"
							ng-if="c.nDuplicates > 0">
							{{c.desc}} ({{c.code}}) <span class="badge badge-primary float-right">{{c.nDuplicates}}</span>
						</a>
					</small>
				</div>
		    </div>
		</div>
	</div>
	<div class="col text-right" ng-show="duplicates.length > 0">
		<a class="btn btn-sm btn-outline-primary" target="_blank" href="/api/organizations/duplicates/byCountry/{{country}}/csv" download="duplicates.{{country}}.csv">download as CSV</a>
	</div>
</div>

<h5 class="text-muted" ng-if="!loading && duplicates.length == 0">No duplicates</h5>

<p ng-show="duplicates.length > 0">
	 <input type="text" class="form-control" ng-model="duplicateFilter" placeholder="Filter..." />
</p>


<table class="table table-sm table-hover" ng-if="duplicates.length > 0">
	<thead class="thead-light">
		<tr class="d-flex">
			<th class="col-8">
				<a href="javascript:void(0)" ng-click="sortBy('name')">Organization</a>
				<i ng-show="sortProperty=='name'" ng-class="{'fas fa-chevron-up': sortReverse, 'fas fa-chevron-down': !sortReverse }"></i>
			</th>
			<th class="col-3">
				<a href="javascript:void(0)" ng-click="sortBy('city')">Place</a>
				<i ng-show="sortProperty=='city'" ng-class="{'fas fa-chevron-up': sortReverse, 'fas fa-chevron-down': !sortReverse }"></i>
			</th>
			<th class="col-1 text-right">
				<a href="javascript:void(0)" ng-click="sortBy('numberOfDuplicates')"># pending duplicates</a>
				<i ng-show="sortProperty=='numberOfDuplicates'" ng-class="{'fas fa-chevron-up': sortReverse, 'fas fa-chevron-down': !sortReverse }"></i>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="d in duplicates | filter:duplicateFilter | orderBy:sortProperty:sortReverse" class="d-flex">
			<td class="col-8">
				<a href="javascript:void(0)" title="{{d.id}}" ng-click="prepareDuplicatesModal(d)" data-toggle="modal" data-target="#duplicatesModal">{{d.name}}</a>
				<a href="#!/edit/0/{{d.id}}" title="edit"><i class="fa fa-edit"></i></a>
			</td>
			<td class="col-3"><img ng-src="resources/images/flags/{{d.country}}.gif" /> {{d.city || '-'}}, {{d.country}}</td>
			<td class="col-1 text-right">{{d.numberOfDuplicates}}</td>
		</tr>
	</tbody>
</table>

<div class="modal fade" id="duplicatesModal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{currentOrg.name}}</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="text-muted" ng-if="currentDuplicates.length == 0">No duplicates</div>
				<org-details org="currentOrgDetails" org-title="Registered organization" show="default"></org-details>
				<org-duplicates org-id="currentOrgDetails.id" duplicates="currentDuplicates"></org-form-duplicates>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="saveCurrentDuplicates()" ng-if="currentDuplicates.length > 0">Save changes</button>
			</div>
		</div>
	</div>
</div>
