<page-title title="Context Editor"></page-title>

<div class="container-fluid">
	<div class="row">
		<div class="col">
			<p>
				<b>Context ID: </b>{{ctxId}}<br /> <b>Label: </b>{{ctxInfo.label}}<br /> <b>Type: </b>{{ctxInfo.type}}<br /> <b>Parameters: </b><a href="javascript:void(0)" data-toggle="modal"
					data-target="#showParametersModal" ng-click="loadContextParameters()">[show]</a>
			</p>
			<p>
				<a class="btn btn-sm btn-info" href="#!/contexts">Return to contexts list</a> <a class="btn btn-sm btn-success" href="/api/contexts/{{ctxId}}" target="_blank">Download</a>
			</p>

			<ul>
				<li ng-repeat="cat in categories" style="display: in"><a href="javascript:void(0)" ng-click="populateNode(0, cat)" ng-hide="cat.populated || cat.nChilds == 0">[+{{cat.nChilds}}]</a> <span
					class="badge badge-info" ng-show="cat.claim">claim</span> <a href="javascript:void(0)" title="{{cat.label}}" data-toggle="modal" data-target="#showParametersModal"
					ng-click="initShowParameters(cat.parameters)">{{cat.id}}</a>
					<ul ng-show="cat.concepts.length > 0">
						<li ng-repeat="c0 in cat.concepts"><a href="javascript:void(0)" ng-click="populateNode(1, c0)" ng-hide="c0.populated || c0.nChilds == 0">[+{{c0.nChilds}}]</a> <span class="badge badge-info"
							ng-show="c0.claim">claim</span> <a href="javascript:void(0)" title="{{c0.label}}" data-toggle="modal" data-target="#showParametersModal" ng-click="initShowParameters(c0.parameters)">{{c0.id}}</a>
							<ul ng-show="c0.concepts.length > 0">
								<li ng-repeat="c1 in c0.concepts"><a href="javascript:void(0)" ng-click="populateNode(2, c1)" ng-hide="c1.populated || c1.nChilds == 0">[+{{c1.nChilds}}]</a> <span class="badge badge-info"
									ng-show="c1.claim">claim</span> <a href="javascript:void(0)" title="{{c1.label}}" data-toggle="modal" data-target="#showParametersModal" ng-click="initShowParameters(c1.parameters)">{{c1.id}}</a>
									<ul ng-show="c1.concepts.length > 0">
										<li ng-repeat="c2 in c1.concepts"><span class="badge badge-info" ng-show="c2.claim">claim</span> <a href="javascript:void(0)" title="{{c2.label}}" data-toggle="modal"
											data-target="#showParametersModal" ng-click="initShowParameters(c2.parameters)">{{c2.id}}</a></li>
									</ul></li>
							</ul></li>
					</ul></li>
			</ul>

		</div>
	</div>
</div>

<!-- Modals -->

<div class="modal fade" tabindex="-1" id="showParametersModal">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Parameters</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<table class="table table-sm table-striped" style="table-layout: fixed;">
				<tr ng-show="parameters.length == 0">
					<td colspan="2" align="center">0 parameter(s)</td>
				</tr>
				<tr ng-repeat="p in parameters">
					<th style="width: 25%; padding-left: 20px">{{p.name}}</th>
					<td style="overflow-x: auto;"><pre style="margin: 0;">{{p.value}}</pre></td>
				</tr>
			</table>
		</div>
	</div>
</div>