<link href="css/similarity.css?v=2.7.0-TR3" 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-if="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="reloadSimilarityIndexes()"
        set-plugin-active="setPluginIsActive(isPluginActive)"
        ng-if="isLicenseValid()">
    </inactive-plugin-directive>

	<div class="card mb-2 existing-indexes" ng-if="isLicenseValid() && isGraphDBRepository && pluginIsActive">
		<div class="card-block">
			<div class="clearfix">
				<a ng-href="similarity/index/create" ng-if="canEditRepo" 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="selectedSimilarityIndex === 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="similarityIndex in similarityIndexes track by similarityIndex.name"
                        class="index-row"
						ng-class="{'table-info text-secondary':similarityIndex.name == selectedSimilarityIndex.name}">
						<td>
                            <a class="lead index-name" ng-href="{{(similarityIndex.isBuiltStatus() || similarityIndex.isRebuildingStatus() || similarityIndex.isOutdatedStatus()) ? '#' : ''}}" ng-click="goToSimilarityIndex(similarityIndex)">{{similarityIndex.name}}</a>
						</td>
						<td>
							<span class="tag tag-default" ng-if="similarityIndex.isTextType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'text.type.index' | translate}}</span>
							<span class="tag tag-default" ng-if="similarityIndex.isPredicationType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'predication.type.index' | translate}}</span>
							<span class="tag tag-default" ng-if="similarityIndex.isTextLiteralType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'literal.type.index' | translate}}</span>
						</td>

						<td class="text-xs-right">
							<span class="text-muted mr-2" ng-if="similarityIndex.isOutdatedStatus()" gdb-tooltip="{{'data.changed.tooltip' | translate}}">{{'outdated.status' | translate}}</span>
							<span class="text-muted mr-2" ng-if="similarityIndex.isFailedStatus()" gdb-tooltip="{{'index.building.failed.tooltip' | translate}}">{{'failed.status' | translate}}</span>
							<span class="text-muted mr-2" ng-if="similarityIndex.isInterruptedStatus()" gdb-tooltip="{{'index.building.interrupted.tooltip' | translate}}">{{'interrupted.status' | translate}}</span>
							<span class="text-muted mr-2" ng-if="similarityIndex.isObsoleteStatus()" gdb-tooltip="{{'index.obsolete.tooltip' | translate}}">{{'obsolete.status' | translate}}</span>
							<span class="btn btn-link similarity-index-building-loader" ng-if="similarityIndex.isBuildingStatus() || similarityIndex.isRebuildingStatus() || similarityIndex.isCreatingStatus()">
          				        <em class="icon-reload loader"></em>
      				        </span>

							<span class="btn btn-link view-sparql-query-btn" ng-click="viewCreateQuery(similarityIndex)"
                                  ng-if="similarityIndex.selectQuery && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())"
                                  gdb-tooltip="{{'view.sparql.query.title' | translate}}">
									<em class="icon-sparql"></em>
							</span>

                            <span class="actions-bar hovered-item">
                                <button class="btn btn-link edit-query-btn"
                                        ng-if="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus()"
                                        ng-click="editSimilarityIndex(similarityIndex)"
                                        gdb-tooltip="{{similarityIndex.isPredicationType() ? 'edit.search.analogical.query.title' : 'edit.search.query.title' | translate}}">
                                    <span class="icon-edit"></span>
                                </button>
                            </span>

                            <button class="btn btn-link clone-index-btn"
                                    ng-if="similarityIndex.selectQuery && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())"
                                    ng-click="cloneSimilataryIndex(similarityIndex)"
                                    gdb-tooltip="{{'create.index.from.existing.tooltip' | translate}}">
                                <span class="icon-copy"></span>
                            </button>

							<button type="button" ng-if="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus() && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())" ng-disabled="!similarityIndex.selectQuery"
									ng-click="rebuildIndex(similarityIndex)" 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="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus()" ng-click="deleteSimilarityIndex(similarityIndex)"
									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="selectedSimilarityIndex === undefined || selectedSimilarityIndex.isTextLiteralType()">
		<div class="card-block">
			<h3 class="selected-index">{{'search.in.index' | translate}} <strong>{{selectedSimilarityIndex.name}}</strong></h3>

			<div ng-if="selectedSimilarityIndex.isTextType()">
				<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="similaritySearchType.isSearchTermType(searchType)">{{'term' | translate}}</span>
						    <span ng-if="similaritySearchType.isSearchDocumentType(searchType)">{{'document' | translate}}</span>
						  </button>
						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						    <a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_TERM)">{{'term' | translate}}</a>
						    <a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_DOCUMENT)">{{'document' | translate}}</a>
						  </div>
						</div>
					</div>

				</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="similarityResultType.TERM_RESULT === resultType">{{'term' | translate}}</span>
								<span ng-if="similarityResultType.DOCUMENT_RESULT === resultType">{{'document' | translate}}</span>
						  </button>
						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						    <a class="dropdown-item" ng-click="updateSearchType(similarityResultType.TERM_RESULT)">{{'term' | translate}}</a>
						    <a class="dropdown-item" ng-click="updateSearchType(similarityResultType.DOCUMENT_RESULT)">{{'document' | translate}}</a>
						  </div>
						</div>
					</div>
				</div>
			</div>

			<div ng-if="selectedSimilarityIndex.isPredicationType()">
				<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="similaritySearchType.isSearchEntityType(searchType)">{{'similar.subject.label' | translate}}</span>
							<span ng-if="similaritySearchType.isSearchEntityPredicateType(searchType)">{{'object.label' | translate}}</span>
							<span ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">{{'analogical.label' | translate}}</span>
						</button>
						<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ENTITY)">{{'similar.subject.label' | translate}}</a>
							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ENTITY_PREDICATE)">{{'object.label' | translate}}</a>
							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ANALOGICAL)">{{'analogical.label' | translate}}</a>
						</div>
					</div>
				</div>
			</div>

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

			<div class="row" ng-if="similaritySearchType.isSearchEntityPredicateType(searchType)">
				<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="setPsiSubject(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(selectedSimilarityIndex, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<div class="row" ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">
				<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="setAnalogicalSubject(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="setAnalogicalObject(uri)"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<div class="row" ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">
				<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(selectedSimilarityIndex, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
							uri-validation="true"
							preserve-input="true"
							empty="empty">
					</search-resource-input>
				</div>
			</div>

			<button ng-if="selectedSimilarityIndex.isTextType()" 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-if="selectedSimilarityIndex.isPredicationType()" 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="selectedSimilarityIndex.isTextType()">
				<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="selectedSimilarityIndex.isPredicationType()">
				<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.isSearchAnalogicalType()">{{'results.for.label' | translate}}
					<a ng-show="lastSearch.isSearchDocumentType() || lastSearch.isSearchEntityType() || lastSearch.isSearchEntityPredicateType()"
					   title="{{trimIRI(lastSearch.termOrSubject)}}" class="uri" href="resource?uri={{trimIRI(lastSearch.termOrSubject)}}" rel="noopener" target="_blank">{{trimIRI(lastSearch.termOrSubject)}}</a>

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

					<span ng-show="lastSearch.isSearchTermType()">"{{lastSearch.termOrSubject}}"</span>
				</em>

				<em ng-show="lastSearch.isSearchAnalogicalType()">
					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 pt-1" ng-if="lastSearch">
                <yasgui-component ng-if="!isLoading" id="query-editor" yasgui-config="yasguiConfig""></yasgui-component>
                <loader-component ng-if="isLoading"></loader-component>
			</div>
		</div>
	</div>

</div>
