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

<div class="container-fluid">
	<div class="row">
		<div class="col">
			<p>
				<b>Vocabulary ID: </b>{{vocId}}<br />
				<b>Vocabulary Name: </b>{{vocInfo.name}}<br />
				<b>Description: </b>{{vocInfo.description}}
			</p>
			<p>
				<a class="btn btn-sm btn-info" href="#!/vocs">Return to vocabulary list</a>
				<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</button>
				<a class="btn btn-sm btn-success" href="/api/vocs/{{vocId}}/terms" target="_blank">Download</a>
			</p>

			<page-filter filter="termFilter" list="terms"></page-filter>

			<table class="table table-sm table-striped">
				<thead>
					<tr>
						<th style="width: 20%">Code</th>
						<th style="width: 20%">Name</th>
						<th style="width: 10%">Encoding</th>
						<th style="width: 40%">Synonyms</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-show="(terms|filter:termFilter).length == 0">
						<td colspan="5" class="text-muted">no terms</td>
					</tr>
					<tr ng-repeat="t in terms|filter:termFilter">
						<th>{{t.code}}</th>
						<td>{{t.name}}</td>
						<td><span class="badge badge-warning">{{t.encoding}}</span></td>
						<td><span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span> <span class="badge badge-primary mr-1" ng-repeat="s in t.synonyms">{{s.term}}</span></td>
						<td align="right">
							<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)">edit</button>
							<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- Modals -->

<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
	<form>
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
					<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">
					<form-textfield label="Code" value="tmpTerm.code"></form-textfield>
					<form-textfield label="Name" value="tmpTerm.name"></form-textfield>
					<form-textfield label="Encoding" value="tmpTerm.encoding" optional="true"></form-textfield>

					<div class="form-group">
						<table class="table table-sm table-striped">
							<thead>
								<tr>
									<th>Synonym</th>
									<th>Encoding</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr ng-show="tmpTerm.synonyms.length == 0">
									<td colspan="3">0 synonym(s)</td>
								</tr>
								<tr ng-repeat="s in tmpTerm.synonyms">
									<td>{{s.term}}</td>
									<td>{{s.encoding}}</td>
									<td align="right"><button class="btn btn-sm btn-danger" type="button" ng-click="tmpTerm.synonyms.splice($index, 1)">
											<i class="fa fa-trash"></i>
										</button></td>
								</tr>
							</tbody>
							<tfoot>
								<tr ng-init="newSynomym=newEncoding=''">
									<td><input type="text" class="form-control form-control-sm" placeholder="new synomym..." ng-model="newSynomym" /></td>
									<td><input type="text" class="form-control form-control-sm" placeholder="encoding..." ng-model="newEncoding" /></td>
									<td align="right">
										<button type="button" class="btn btn-sm btn-outline-success" ng-click="tmpTerm.synonyms.push({'term': newSynomym, 'encoding': newEncoding}); newSynomym=newEncoding=''" ng-disabled="!newSynomym">
											<i class="fa fa-plus"></i>
										</button>
									</td>
								</tr>
							</tfoot>

						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)" ng-disabled="newSynomym || !tmpTerm.code || !tmpTerm.name">Submit</button>
				</div>
			</div>
		</div>
	</form>
</div>
