<page-title title="Datasource Manager: Results"></page-title>

<div class="container-fluid">
	<div class="row mt-5">
		<div class="col">
			<page-filter filter="apiFilter" list="results" description="Filter in current page..." total-label="Filtered in current page"></page-filter>

			<p class="text-muted">
				<span></span><b>Number of results:</b> {{nResults}}<br />
				<b>Page:</b> <span ng-if="nPages > 0">{{currPage + 1}} / {{nPages}}</span><span ng-if="nPages == 0">- / -</span>
			</p>

			<nav ng-show="nPages > 1">
				<ul class="pagination small">
					<li class="page-item" ng-class="{'disabled' : currPage <= 0}">
						<a class="page-link" href="javascript:void(0)" ng-click="gotoPage(currPage - 1)">&laquo; Previous</a>
					</li>
					<li class="page-item" ng-class="{'disabled': currPage + 1 >= nPages}">
						<a class="page-link" href="javascript:void(0)" ng-click="gotoPage(currPage + 1)">Next &raquo;</a>
					</li>
				</ul>
			</nav>
			
			<div class="card mb-4 small" ng-repeat="r in results|filter:apiFilter">
				<div class="card-body">
					<h5 class="card-title" title="{{r.id}}">{{r.name}} 
						<span style="font-size: 0.6em" ng-if="r.otherName && r.name != r.otherName"><br />{{r.otherName}}</span>
					</h5>

					<table class="table table-sm">
						<tr>
							<th style="width: 20em;">Id</th>
							<td>{{r.id}}</td>
						</tr><tr>
							<th>Type</th>
							<td>{{r.type}}</td>
						</tr><tr>
							<th>Collected From</th>
							<td>{{r.collectedFrom}}</td>
						</tr><tr ng-if="r.websiteUrl">
							<th>URL</th>
							<td><a href="{{r.websiteUrl}}" target="_blank">{{r.websiteUrl}}</a></td>
						</tr><tr>
							<th>Namespace Prefix</th>
							<td>{{r.nsprefix}}</td>
						</tr>
						<tr ng-if="r.organizations">
							<th>Organization(s)</th>
							<td>
								<span ng-repeat="o in r.organizations">
									{{o.name}} 
									<img ng-src="common/images/flags/{{o.country}}.gif" title="{{o.country}}" alt=""  ng-if="o.country"/>
									<br />
								</span>
							</td>
						</tr><tr>
							<th>APIs</th>
							<td>
								<div ng-repeat="a in r.apis" ng-if="a.id">
									<span class="monospaced">
										<a href="#!/dsm/api?id={{a.id}}">{{a.id}}</a>
									</span>
									<span class="badge badge-primary" title="protocol">{{a.protocol}}</span>
									<span class="badge badge-info" title="compliance">{{a.compliance}}</span>
									<span class="badge badge-success" ng-if="a.active">active</span><span class="badge badge-danger" ng-if="!a.active">not active</span>
									<span ng-if="a.aggrDate"><br/><b>Last aggregation:</b> {{a.aggrDate}} <b>(total: {{a.aggrTotal}})</b></span>
								</div>
								
								<a class="btn btn-primary btn-sm mt-2" href="#!/dsm/addApi?dsId={{r.id}}&amp;dsName={{r.name}}">add api</a>
							</td>
						</tr><tr ng-if="r.consenttermsofuse">
							<th>Consent Terms of Use</th>
							<td><span class="badge badge-success">YES</span></td>
						</tr><tr ng-if="r.fulltextdownload">
							<th>Fulltext Download</th>
							<td><span class="badge badge-success">YES</span></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
