D-Net

<p class="muted"><b>ID: </b>{{orgId}}</p>

<div class="row">

	<div class="col-xl-8 col-lg-10">

		<div class="card">

			<div class="card-header">

				<ul class="nav nav-tabs card-header-tabs">

					<li class="nav-item">

						<a href="#!/metadata/{{orgId}}" class="nav-link">Metadata</a>

					</li>

					<li class="nav-item">

						<a href="javascript:void(0)" class="nav-link active" href="#">Relations</a>

					</li>

					<li class="nav-item">

						<a href="#!/similarities/{{orgId}}" class="nav-link" href="#">Similarities</a>

					</li>

				</ul>

			</div>

			<table class="table table-sm mt-2">

				<thead>

					<tr>

						<th class="pl-3" style="border-top: none;">Related organization</th>

						<th style="border-top: none; width: 156px">Type</th>

						<th style="border-top: none; width: 44px"></th>

					</tr>

				</thead>

				<tbody>

					<tr ng-if="rels.length == 0">

						<td class="text-center text-muted" colspan="3">No relations</td>

					</tr>

					<tr ng-repeat="r in rels">

						<td class="pl-3"><a href="#!/metadata/{{r.relatedOrgId}}" title="{{r.relatedOrgId}}">{{r.relatedOrgName}}</a></td>

						<td>{{r.type}}</td>

						<td class="text-right">

							<button type="button" class="btn btn-sm  btn-outline-danger" ng-click="deleteRelation(r.relatedOrgId, r.type)"><i class="fa fa-trash"></i></button>

						</td>

					</tr>

				</tbody>

				<tfoot>

					<tr>

						<td>

							<input type="text" placeholder="add a related organization..." readonly="readonly"

								class="form-control form-control-sm" style="background-color: white; color: #007bff;"

								ng-model="newRelation.name" 

								data-toggle="modal" data-target="#selectRelatedOrgModal"/>

						</td>

						<td>

							<select class="custom-select custom-select-sm" ng-model="newRelType">

								<option disabled="disabled" value=''>rel type...</option>

								<option ng-repeat="t in vocabularies.relTypes">{{t}}</option>

							</select>

						</td>

						<td class="text-right">

							<button type="button" class="btn btn-sm btn-outline-success" ng-disabled="!newRelType || !newRelation.id" ng-click="addRelation()"><i class="fa fa-plus"></i></button>

						</td>

					</tr>

				</tfoot>

			</table>

		</div>

	</div>

</div>

<div class="modal fade" id="selectRelatedOrgModal" tabindex="-1" role="dialog">

	<div class="modal-dialog modal-xl" role="document">

		<div class="modal-content">

			<div class="modal-header">

				<h5 class="modal-title">Select Organization</h5>

				<button type="button" class="close" data-dismiss="modal">&times;</button>

			</div>

			<div class="modal-body" style="min-height: 300px">

				<div class="input-group input-group-sm">

					<input type="text" class="form-control" ng-model="textSearch" />

					<div class="input-group-append">

						<button type="button" class="btn btn-outline-primary" ng-click="search(textSearch, 0, 25)">Search</button>

					</div>

				</div>

				<div ng-show="searchValue">

					<p class="text-right"><b>Page:</b> {{searchOrgs.number + 1}} / {{searchOrgs.totalPages}} <b>- Total elements:</b> {{searchOrgs.totalElements}}</p>

					<div ng-show="searchOrgs.totalElements > 0">

						<nav>

							<ul class="pagination justify-content-center">

								<li class="page-item" ng-class="{'disabled' : searchOrgs.first }">

									<a class="page-link" ng-click="search(searchValue, searchOrgs.number - 1, searchOrgs.size)">&laquo; Previous</a>

								</li>

								<li class="page-item" ng-class="{'disabled' : searchOrgs.last }">

									<a class="page-link" ng-click="search(searchValue, searchOrgs.number + 1, searchOrgs.size)">Next &raquo;</a>

						    	</li>

							</ul>

						</nav>

						<table class="table table-sm table-hover">

							<thead class="thead-light">

								<tr class="d-flex">

									<th class="col-6">Organization name</th>

									<th class="col-3">Place</th>

									<th class="col-2 text-center">Acronyms</th>

									<th class="col-1 text-center">Type</th>

								</tr>

							</thead>

							<tbody>

								<tr ng-repeat="o in searchOrgs.content" class="d-flex" title="{{o.id}}" ng-click="prepareNewRelation(o)" data-dismiss="modal" style="cursor: pointer;">

									<td class="col-6">{{o.name}}</td>

									<td class="col-3"><img ng-src="resources/images/flags/{{o.country}}.gif" /> {{o.city}}, {{o.country}}</td>

									<td class="col-2 text-center">{{o.acronyms.join()}}</td>

									<td class="col-1 text-center">{{o.type}}</td>

								</tr>

							</tbody>

						</table>

					</div>

				</div>

			</div>

		</div>

	</div>

</div>