<link href="css/autocomplete.css?v=3.4.0-RC3" rel="stylesheet">
<div id="autocomplete" class="page" data-test="autocomplete-page">
	<h1>
		{{title}}
        <page-info-tooltip></page-info-tooltip>
	</h1>

	<div onto-loader
		 ng-show="loader"
		 class="autocomplete-loader"
		 message="getLoaderMessage"
		 size="75">
	</div>

    <div core-errors write ontop fedx license></div>

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

    <div ng-if="isLicenseValid() && canWriteActiveRepo() && !loading && !isRestricted && pluginIsActive"
		 data-test="autocomplete-content">
		<div class="alert alert-info autocomplete-configuring-not-supported-alert" ng-if="!loader && pluginFound && getDegradedReason()">
			<h4>{{'autocomplete.not.supported' | translate}}</h4>
			<p>{{'autocomplete.config.not.supported' | translate}} {{getDegradedReason()}}</p>
		</div>
		<div ng-if="pluginFound && !getDegradedReason()">
            <div class="lead mb-1" id="toggleIndex">
				<span class="autocomplete-header" data-test="autocomplete-header">{{'autocomplete.for.repo' | translate}} <strong>{{getActiveRepository()}}</strong> {{'is.label' | translate}} <span class="tag {{autocompleteEnabled ? 'tag-primary' : 'tag-default'}}">{{autocompleteEnabled ? 'common.on.btn' : 'common.off.btn' | translate}}</span></span>
				<span gdb-tooltip="{{'click.to' | translate}} {{autocompleteEnabled ? 'disable.label' : 'enable.label' | translate}} {{'autocomplete.sentence.end' | translate}}"
                      tooltip-placement="top"
                      ng-click="toggleAutocomplete()"
                      guide-selector="autocompleteCheckbox"
                      class="switch autocomplete-switch enable-autocomplete-switch">
                    <input type="checkbox" class="switch" ng-checked="autocompleteEnabled"/>
                    <label for="toggleIndex"></label>
                </span>
				<span ng-show="autocompleteEnabled" class="autocomplete-status" guide-selector="autocompleteStatus">
					{{'with.status' | translate}}
					<span class="tag tag-success" ng-show="indexStatus.indexOf('READY') == 0"><em class="ri-checkbox-circle-line icon-lg"></em> {{'ready.label' | translate}}</span>

					<span ng-show="indexStatus == 'BUILDING'">
						<span class="tag tag-info">
							<span class="ri-reset-left-line icon-lg loader"></span>
							{{'building.label' | translate}}
						</span>
						<button class="btn btn-link btn-sm" ng-click="interruptIndexing()"
								gdb-tooltip="{{'interrupt.indexing' | translate}}"><span class="ri-close-line"></span></button>
					</span>

					<span class="tag tag-danger" ng-show="indexStatus.indexOf('ERROR') == 0"><em class="ri-alert-line icon-lg"></em> {{indexStatus}}</span>
					<span class="tag tag-warning" ng-show="indexStatus == 'CANCELED'"><em class="ri-alert-line icon-lg"></em> {{'index.building.cancelled' | translate}}</span>
					<span class="tag tag-warning" ng-show="indexStatus == 'NONE'"><em class="ri-information-2-line icon-lg"></em> {{'index.not.built.yet' | translate}}</span>
				</span>



				<p class="pull-right" ng-show="autocompleteEnabled">
					<button ng-disabled="indexStatus == 'BUILDING'" ng-click="buildIndex()" class="btn btn-primary build-index-btn">{{'build.now' | translate}}</button>
				</p>
			</div>

			<div ng-class="indexStatus != 'READY_CONFIG' ? 'invisible' : ''" class="alert alert-warning no-icon">
				{{'indexing.options.changed' | translate}}
			</div>

			<button id="wb-autocomplete-addLabel" type="submit" ng-click="addLabel()"
					ng-disabled="indexStatus == 'BUILDING'" class="btn btn-sm btn-primary pull-right"
					gdb-tooltip="{{'add.label.config' | translate}}">
				<span class="ri-add-circle-line"></span>
				{{'add.label' | translate}}
			</button>

			<div id="toggleIRIs" class="pull-right">
				{{'index.iri.is' | translate}}
				<span class="tag {{shouldIndexIRIs ? 'tag-primary' : 'tag-default'}}">{{shouldIndexIRIs ? 'common.on.btn' : 'common.off.btn' | translate}}</span>
				<span gdb-tooltip="{{'click.to' | translate}} {{shouldIndexIRIs ? 'disable.label' : 'enable.label' | translate}} {{'indexing.of.iris' | translate}}" tooltip-placement="top" ng-click="toggleIndexIRIs()" class="switch">
                    <input type="checkbox" class="switch" ng-checked="shouldIndexIRIs"/>
                    <label for="toggleIRIs"></label>
                </span>
			</div>

			<table id="wb-autocomplete-labels"
				   data-test="autocomplete-labels-container"
				   class="table table-striped table-hover"
				   aria-describedby="Autocomplete labels table">
				<thead>
				<tr>
					<th id="labelIRIColumn">{{'label.iri' | translate}}</th>
					<th id="languagesColumn">{{'languages.label' | translate}}</th>
					<th id="actionsColumn" style="width: 100px"></th>
				</tr>
				</thead>
				<tbody>
				<tr ng-if="labelConfig.length == 0">
					<td colspan="3">{{'no.labels.configured' | translate}}</td>
				</tr>
				<tr ng-repeat="label in labelConfig"
					class="wb-autocomplete-labels-row" loader-post-repeat-directive>
					<td>
						{{label.labelIri}}
					</td>

					<td>
						<span ng-if="!label.languages">{{'any.language.label' | translate}}</span>
						<span ng-repeat="language in label.languages.split(', ')">
							<span class="tag tag-default">{{language}}</span>
						</span>
					</td>

					<td class="actions-bar">
						<button class="btn btn-link" ng-click="editLabel(label)"
								gdb-tooltip="{{'edit.label.languages' | translate}}"><span class="ri-edit-line"></span></button>
						<button class="btn btn-link secondary" ng-click="removeLabel(label)"
								gdb-tooltip="{{'delete.label.config' | translate}}">
							<span class="ri-delete-bin-6-line"></span>
						</button>
					</td>
				</tr>
				</tbody>
			</table>
        </div>
    </div>
</div>
