<h2>Suggested Organizations</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="#!/pendings/{{c.code}}" 
		                    ng-repeat="c in info.data.byCountry"
		                    ng-if="c.nPendingOrgs > 0">
		                    {{c.desc}} ({{c.code}}) <span class="badge badge-primary float-right">{{c.nPendingOrgs}}</span>
		                </a>
		            </small>
		        </div>
		    </div>
		</div>
	</div>
	<div class="col text-right" ng-show="orgs.length > 0">
		<a class="btn btn-sm btn-outline-primary" target="_blank" href="api/organizations/byCountry/suggested/{{country}}/csv" download="suggested_orgs.{{country}}.csv">download as CSV</a>
	</div>
</div>

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

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

<table class="table table-sm table-hover" ng-if="orgs.length > 0">
	<thead class="thead-light">
		<tr class="d-flex">
			<th class="col-6">
				<a href="javascript:void(0)" ng-click="sortBy('name')">Organization name</a>
				<i ng-show="sortProperty=='name'" ng-class="{'fas fa-chevron-up': sortReverse, 'fas fa-chevron-down': !sortReverse }"></i>
			</th>
			<th class="col-4">
				<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-center">
				<a href="javascript:void(0)" ng-click="sortBy('acronyms')">Acronyms</a>
				<i ng-show="sortProperty=='acronyms'" 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('type')">Type</a>
				<i ng-show="sortProperty=='type'" ng-class="{'fas fa-chevron-up': sortReverse, 'fas fa-chevron-down': !sortReverse }"></i>
			</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="o in orgs | filter:orgFilter | orderBy:sortProperty:sortReverse" class="d-flex">
			<td class="col-6">
				<a href="#!/edit/0/{{o.id}}" title="{{o.id}}">{{o.name}}</a>
			</td>
			<td class="col-4"><img ng-src="resources/images/flags/{{o.country}}.gif" /> {{o.city || '-'}}, {{o.country}}</td>
			<td class="col-1 text-center">{{o.acronyms.join()}}</td>
			<td class="col-1 text-right">{{o.type}}</td>
		</tr>
	</tbody>
</table>

