<link href="css/similarity.css?v=10.5.1" rel='stylesheet' type='text/css'/>

<div class="container-fluid">

	<h1>
		{{title}}
		<span class="btn btn-link"
			  uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
			  popover-trigger="mouseenter"
			  popover-placement="bottom-right"
			  popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
	</h1>
	<div core-errors ontop fedx license></div>
	<div system-repo-warning></div>
	<div class="alert alert-danger" ng-show="repositoryError">
		<p>{{'not.usable.active.repo.error' | translate}}</p>
		<p>{{repositoryError}}</p>
	</div>

    <inactive-plugin-directive
        plugin-name="{{pluginName}}"
        human-readable-plugin-name="Similarity Plugin"
        load-saved="pullList()"
        set-plugin-active="setPluginIsActive(isPluginActive)"
        ng-if="isLicenseValid()">
    </inactive-plugin-directive>

	<div class="card mb-2 existing-indexes" ng-if="isLicenseValid() && getActiveRepository() && pluginIsActive && !isActiveRepoOntopType() && !isActiveRepoFedXType()">
		<div class="card-block" ng-init="getSimilarityIndexes();">
			<div class="clearfix">
				<a ng-href="similarity/index/create" ng-if="canWriteActiveRepo()" class="btn btn-link pull-right">
					<span class="icon-plus create-similarity-index"></span> {{'view.create.similarity.index.title' | translate}}
				</a>
				<h3 class="mb-0"><span class="collapsible-heading" data-toggle="collapse" data-target="#indexes-table"><em class="icon-caret-down text-muted"></em> {{'existing.indexes' | translate}}</span></h3>
				<div class="mt-1" ng-if="selected === undefined">{{'select.existing.similarity.index' | translate}}</div>
			</div>
			<div class="no-indexes" ng-if="similarityIndexes.length == 0"><em>{{'no.indexes' | translate}}</em></div>

			<div class="collapse in mt-1" id="indexes-table">
				<table class="table table-hover mb-0" aria-describedby="Similarity index table">
					<tbody>
					<tr ng-repeat="index in similarityIndexes track by index.name"
                        class="index-row"
						ng-class="{'table-info text-secondary':index.name == selected.name}">
						<td>
                            <a class="lead index-name" ng-href="{{(index.status == 'BUILT' || index.status == 'REBUILDING' || index.status == 'OUTDATED') ? '#' : ''}}" ng-click="goToSimilarityIndex(index)">{{index.name}}</a>
						</td>
						<td>
							<span class="tag tag-default" ng-show="index.type == 'text'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'text.type.index' | translate}}</span>
							<span class="tag tag-default" ng-show="index.type == 'predication'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'predication.type.index' | translate}}</span>
							<span class="tag tag-default" ng-show="index.type == 'textLiteral'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'literal.type.index' | translate}}</span>
						</td>

						<td class="text-xs-right">
							<span class="text-muted mr-2" ng-show="index.status == 'OUTDATED'" gdb-tooltip="{{'data.changed.tooltip' | translate}}">{{'outdated.status' | translate}}</span>
							<span class="text-muted mr-2" ng-show="index.status == 'FAILED'" gdb-tooltip="{{'index.building.failed.tooltip' | translate}}">{{'failed.status' | translate}}</span>
							<span class="text-muted mr-2" ng-show="index.status == 'INTERRUPTED'" gdb-tooltip="{{'index.building.interrupted.tooltip' | translate}}">{{'interrupted.status' | translate}}</span>
							<span class="text-muted mr-2" ng-show="index.status == 'OBSOLETE'" gdb-tooltip="{{'index.obsolete.tooltip' | translate}}">{{'obsolete.status' | translate}}</span>
							<span class="btn btn-link similarity-index-building-loader" ng-show="index.status === 'BUILDING' || index.status === 'REBUILDING' || index.status === 'CREATING'">
          				        <em class="icon-reload loader"></em>
      				        </span>

							<span class="btn btn-link view-sparql-query-btn" ng-click="viewCreateQuery(index)"
                                  ng-if="index.selectQuery && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')"
                                  gdb-tooltip="{{'view.sparql.query.title' | translate}}">
									<em class="icon-sparql"></em>
							</span>
                            <span class="actions-bar hovered-item">
								<a class="btn btn-link edit-query-btn"
                                   ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING'" href="similarity/index/create?selectQuery={{encodeURIComponent(index.selectQuery)}}&options={{index.options}}&editSearchQuery&name={{index.name}}&infer={{index.infer}}&sameAs={{index.sameAs}}&stopList={{index.stopList}}&type={{index.type}}&analyzer={{index.analyzer}}&searchQuery={{index.searchQuery ? encodeURIComponent(index.searchQuery) : ''}}&analogicalQuery={{index.analogicalQuery ? encodeURIComponent(index.analogicalQuery) : ''}}"
                                        gdb-tooltip="{{index.type == 'predication' ? 'edit.search.analogical.query.title'
																			   : 'edit.search.query.title' | translate}}">
									<em class="icon-edit"></em>
								</a>
							</span>

							<a class="btn btn-link clone-index-btn" ng-if="index.selectQuery && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')"
                               href="similarity/index/create?selectQuery={{encodeURIComponent(index.selectQuery)}}&options={{index.options}}&name={{index.name}}&infer={{index.infer}}&sameAs={{index.sameAs}}&stopList={{index.stopList}}&type={{index.type}}&analyzer={{index.analyzer}}&searchQuery={{index.searchQuery ? encodeURIComponent(index.searchQuery) : ''}}&analogicalQuery={{index.analogicalQuery ? encodeURIComponent(index.analogicalQuery) : ''}}"
							   gdb-tooltip="{{'create.index.from.existing.tooltip' | translate}}">
									<em class="icon-copy"></em>
							</a>

							<button type="button" ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING' && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')" ng-disabled="!index.selectQuery"
									ng-click="rebuildIndex(index)" class="btn btn-link reload-index-btn" gdb-tooltip="{{'rebuild.index.tooltip' | translate}}"><span
									class="icon-reload similarity-index-icon-reload"></span></button>
							<button type="button" ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING'" ng-click="deleteIndex(index)"
									class="btn btn-link delete-index-btn" gdb-tooltip="{{'delete.index.tooltip' | translate}}"><span class="icon-trash"></span>
							</button>
						</td>

					</tr>
					</tbody>
				</table>
			</div>

		</div>
	</div>

	<div class="card mb-2 index-search-panel" ng-hide="selected === undefined || selected.type == 'textLiteral'">
		<div class="card-block">
			<h3 class="selected-index">{{'search.in.index' | translate}} <strong>{{selected.name}}</strong></h3>

			<div ng-show="selected.type == 'text'">
				<div class="d-inline-block">
					<strong>{{'similarity.search.type' | translate}} </strong>
					<div class="btn-group">
						<div class="dropdown">
						  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						    <span ng-if="searchType == 'searchTerm'">{{'term' | translate}}</span>
						    <span ng-if="searchType == 'searchDocumentID'">{{'document' | translate}}</span>
						  </button>
						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						    <a class="dropdown-item" ng-click="searchType = 'searchTerm'">{{'term' | translate}}</a>
						    <a class="dropdown-item" ng-click="searchType = 'searchDocumentID'">{{'document' | translate}}</a>
						  </div>
						</div>
					</div>

					<!-- <label class="mr-1">
						<input type="radio" ng-model="searchType" value="searchTerm">
						Term
					</label>

					<label class="mr-1">
						<input type="radio" ng-model="searchType" value="searchDocumentID">
						Document
					</label> -->

				</div>
				<div class="d-inline-block">
					<strong>{{'similarity.result.type' | translate}} </strong>
					<div class="btn-group">
						<div class="dropdown">
						  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span ng-if="resultType == 'termResult'">{{'term' | translate}}</span>
								<span ng-if="resultType == 'documentResult'">{{'document' | translate}}</span>
						  </button>
						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						    <a class="dropdown-item" ng-click="resultType = 'termResult'">{{'term' | translate}}</a>
						    <a class="dropdown-item" ng-click="resultType = 'documentResult'">{{'document' | translate}}</a>
						  </div>
						</div>
					</div>
					<!-- <label class="mr-1">
						<input type="radio" ng-model="resultType" value="termResult">
						Term
					</label>
					<label class="mr-1">
						<input type="radio" ng-model="resultType" value="documentResult">
						Document
					</label> -->
				</div>
			</div>

			<div ng-show="selected.type == 'predication'">
				<strong>{{'similarity.search.type' | translate}} </strong>

				<div class="btn-group">
					<div class="dropdown">
						<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							<span ng-if="searchType == 'searchEntity'">{{'similar.subject.label' | translate}}</span>
							<span ng-if="searchType == 'searchEntityPredicate'">{{'object.label' | translate}}</span>
							<span ng-if="searchType == 'searchAnalogical'">{{'analogical.label' | translate}}</span>
						</button>
						<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
							<a class="dropdown-item" ng-click="searchType = 'searchEntity'">{{'similar.subject.label' | translate}}</a>
							<a class="dropdown-item" ng-click="searchType = 'searchEntityPredicate'">{{'object.label' | translate}}</a>
							<a class="dropdown-item" ng-click="searchType = 'searchAnalogical'">{{'analogical.label' | translate}}</a>
						</div>
					</div>
				</div>
				<!-- <label class="mr-1">
					<input type="radio" ng-model="searchType" value="searchEntity">
					IRI
				</label>
				<label class="mr-1">
					<input type="radio" ng-model="searchType" value="searchEntityPredicate">
					IRI + predicate
				</label> -->

			</div>

			<search-resource-input
					ng-show="searchType != 'searchEntityPredicate' && searchType != 'searchAnalogical'"
					namespacespromise="getNamespacesPromise"
					autocompletepromisestatus="getAutocompletePromise"
					placeholder="{{'search.rdf.resources.for.rdf.entity.placeholder' | translate}}"
					text-button=""
					visual-button="Show"
					visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
					uri-validation="{{searchType != 'searchTerm'}}"
					preserve-input="true"
					empty="empty">
			</search-resource-input>

			<div class="row" ng-show="searchType == 'searchEntityPredicate'">
				<div class="col-md-6 pr-0">
					<search-resource-input
							namespacespromise="getNamespacesPromise"
							autocompletepromisestatus="getAutocompletePromise"
							placeholder="{{'search.rdf.for.subject.placeholder' | translate}}"
							text-button=""
							visual-button=""
							visual-callback="psiSubject = uri"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>


				<div class="col-md-6">
					<search-resource-input
							namespacespromise="getNamespacesPromise"
							autocompletepromisestatus="getAutocompletePromise"
							placeholder="{{'search.rdf.for.predicate.placeholder' | translate}}"
							text-button=""
							visual-button="Show"
							visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<div class="row" ng-show="searchType == 'searchAnalogical'">
				<div class="col-md-6 pr-0">
					<search-resource-input
							namespacespromise="getNamespacesPromise"
							autocompletepromisestatus="getAutocompletePromise"
							placeholder="{{'search.rdf.for.given.subject.placeholder' | translate}}"
							text-button=""
							visual-button=""
							visual-callback="analogicalSubject = uri"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>

				<div class="col-md-6 pr-0">
					<search-resource-input
							namespacespromise="getNamespacesPromise"
							autocompletepromisestatus="getAutocompletePromise"
							placeholder="{{'search.rdf.for.given.object.placeholder' | translate}}"
							text-button=""
							visual-button=""
							visual-callback="analogicalObject = uri"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<div class="row" ng-show="searchType == 'searchAnalogical'">
				<div class="col-md-12 mt-2">
					<search-resource-input
							namespacespromise="getNamespacesPromise"
							autocompletepromisestatus="getAutocompletePromise"
							placeholder="{{'search.rdf.for.search.subject.placeholder' | translate}}"
							text-button=""
							visual-button="Show"
							visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<button ng-show="selected.type == 'text'" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>

			<button ng-show="selected.type == 'predication'" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type-predication">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>

			<div id="search-type" class="mt-1 collapse" ng-show="selected.type == 'text'">
				<label for="indexParameters" class="col-form-label"><strong>{{'semantic.vectors.search.parameters.label' | translate}}</strong></label>
				<input class="form-control" type="text" placeholder="-numsearchresults 20 -searchtype minsim ({{'optional.label' | translate}})" ng-model="searchParameters" >
				<div class="small text-muted" style="margin-top: 0.5rem">{{'see.the.full' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#search-parameters">{{'supported.parameters.list' | translate}}</a></div>
			</div>

			<div id="search-type-predication" class="mt-1 collapse" ng-show="selected.type == 'predication'">
				<label for="indexParameters" class="col-form-label"><strong>{{'semantic.vectors.search.parameters.label' | translate}}</strong></label>
				<input class="form-control" type="text" placeholder="-numsearchresults 20 -searchtype minsim ({{'optional.label' | translate}})" ng-model="searchParameters" >
				<div class="small text-muted" style="margin-top: 0.5rem">{{'see.the.full' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#search-parameters">{{'supported.parameters.list' | translate}}</a></div>
			</div>


		</div>
	</div>

	<div class="card search-results" ng-show="lastSearch">
		<div class="card-block">
				<em ng-show="lastSearch.type != 'searchAnalogical'">{{'results.for.label' | translate}}
					<a ng-show="lastSearch.type == 'searchDocumentID' || lastSearch.type == 'searchEntity' || lastSearch.type == 'searchEntityPredicate'"
					   title="{{trimIRI(lastSearch.termOrSubject)}}" class="uri" href="resource?uri={{trimIRI(lastSearch.termOrSubject)}}" rel="noopener" target="_blank">{{trimIRI(lastSearch.termOrSubject)}}</a>

					<span ng-show="lastSearch.type == 'searchEntityPredicate'"> + <a title="{{lastSearch.predicate}}" target="_blank"
					   class="uri" href="resource?uri={{lastSearch.predicate}}">{{lastSearch.predicate}}</a> -></span>

					<span ng-show="lastSearch.type == 'searchTerm'">"{{lastSearch.termOrSubject}}"</span>
				</em>

				<em ng-show="lastSearch.type == 'searchAnalogical'">
					If <a title="{{analogicalSubject}}" class="uri" href="resource?uri={{analogicalSubject}}" rel="noopener" target="_blank">{{analogicalSubject}}</a>

					-> <a title="{{analogicalObject}}" rel="noopener" target="_blank" class="uri" href="resource?uri={{analogicalObject}}">{{analogicalObject}}</a>

					then <a title="{{searchSubject}}" rel="noopener" target="_blank" class="uri" href="resource?uri={{searchSubject}}">{{searchSubject}}</a> -> ?

				</em>

			<button type="button" class="btn btn-link" ng-click="viewSearchQuery()">{{'view.sparql.query.title' | translate}}</button>


			<div class="yasr-container" ng-show="lastSearch">
				<div id="yasr">
					<!--<uib-pagination class="nav navbar-right" ng-show="allResultsCount > pageSize" total-items="allResultsCount" items-per-page="pageSize" ng-model="page" ng-change="changePagination()" direction-links="false" boundary-links="true" max-size="5" rotate="true"></pagination>-->
					<div class="yasr" id="yasr-inner">
						<div class='yasr_results'></div>
					</div>
				</div>

				<div id="results-loader" class="ot-loader opacity-hide" onto-loader size="100"></div>
			</div>
		</div>
	</div>

</div>
