D-Net

<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="#!/edit/0/{{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 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>