<link href="css/rdfrank.css?v=10.5.1" rel="stylesheet">
<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=10.5.1" rel="stylesheet"/>

<div id="rdfRank" class="page">
	<h1>
		{{title}}
		<em 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></em>
	</h1>

	<div onto-loader-new
		 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="RDF Rank Plugin"
        load-saved="checkForPlugin()"
        set-plugin-active="setPluginIsActive(isPluginActive)"
        ng-if="isLicenseValid()">
    </inactive-plugin-directive>

    <div ng-show="isLicenseValid() && canWriteActiveRepo() && !loading && pluginIsActive">
		<div class="alert alert-info" ng-if="!loader && pluginFound && getDegradedReason()">
			<h4>{{'not.fully.supported.rdfrank.warning' | translate}}</h4>
			<p>{{'configuring.rdfrank.not.supported.warning' | translate}} {{getDegradedReason()}}</p>
		</div>
		<div ng-show="!isRestricted && pluginFound && !getDegradedReason()">
            <div class="lead mb-1" id="toggleIndex">
				<span class="rdf-rank-status">{{'rdfrank.for.repo.label' | translate}} <strong>{{getActiveRepository()}}</strong> {{'is.with.status.label' | translate}}</span>
                <span class="tag tag-success" ng-show="currentRankStatus.indexOf('COMPUTED') == 0"><em class="icon-check icon-lg"></em> {{'computed.status' | translate}}</span>

                <span ng-show="currentRankStatus == 'COMPUTING'">
                    <span class="tag tag-info">
                        <span class="icon-reload icon-lg loader"></span>
                        {{'computing.loader.msg' | translate}}
                    </span>
                    <button class="btn btn-link btn-sm" ng-click="interruptComputation()"
                            gdb-tooltip="{{'interrupt.indexing.tooltip' | translate}}"><span class="icon-close"></span></button>
                </span>

                <span class="tag tag-danger" ng-show="currentRankStatus.indexOf(rdfStatus.ERROR) == 0"><em class="icon-warning icon-lg"></em> {{currentRankStatus}}</span>
                <span class="tag tag-warning" ng-show="currentRankStatus == rdfStatus.OUTDATED"><em class="icon-warning icon-lg"></em> {{'outdated.status' | translate}}</span>
				<span class="tag tag-warning" ng-show="currentRankStatus == rdfStatus.CONFIG_CHANGED"><em class="icon-warning icon-lg"></em> {{'configuration.changed.warning' | translate}}</span>
                <span class="tag tag-warning" ng-show="currentRankStatus == rdfStatus.CANCELED"><em class="icon-warning icon-lg"></em> {{'computation.canceled.warning' | translate}}</span>
                <span class="tag tag-warning" ng-show="currentRankStatus == rdfStatus.EMPTY"><em class="icon-info icon-lg"></em> {{'rdfrank.not.build.yet.warning' | translate}}</span>

				<p class="pull-right">
					<button ng-disabled="currentRankStatus == rdfStatus.COMPUTING" ng-click="computeRank()" class="btn btn-primary compute-rdf-rank-btn">{{'compute.full.btn' | translate}}</button>
                    <button ng-hide="currentRankStatus != rdfStatus.OUTDATED"
							ng-click="computeIncrementalRank()" class="btn btn-primary">{{'compute.incremental.btn' | translate}}</button>
				</p>
			</div>

			<br>

			<div id="toggleFilterMode">
				<h3 class="d-inline-block mr-1">{{'filtering.header' | translate}}</h3>
				<span class="tag {{filteringEnabled ? 'tag-primary' : 'tag-default'}}">{{filteringEnabled ? 'common.on.btn' : 'common.off.btn' | translate}}</span>
                <span gdb-tooltip="{{'click.to' | translate}} {{filteringEnabled ? 'disable' : 'enable' | translate}} {{'filtering' | translate}}" tooltip-placement="top" ng-click="toggleFiltering()" class="switch rdf-rank-filter-switch">
                    <input type="checkbox" class="switch" ng-checked="filteringEnabled"/>
                    <label for="toggleFilterMode"></label>
                </span>
			</div>


			<div id="filterConfig" ng-show="filteringEnabled" class="card card-block">

				<div class="mb-2">
					<div id="toggleIncludeExplicit" class="d-inline-block mr-2">
						{{'include.explicit.header' | translate}}
						<span class="tag {{includeExplicit ? 'tag-primary' : 'tag-default'}}">{{includeExplicit ? 'yes' : 'no' | translate}}</span>
                        <span gdb-tooltip="{{'click.to' | translate}} {{includeExplicit ? 'exclude' : 'include' | translate}} {{'explicit.statements' | translate}}" tooltip-placement="top" ng-click="toggleIncludeExplicit()" class="switch">
	                    <input type="checkbox" class="switch" ng-checked="includeExplicit"/>
	                    <label for="toggleIncludeExplicit"></label>
	                </span>
					</div>

					<div id="toggleIncludeImplicit" class="d-inline-block">
						{{'include.implicit.header' | translate}}
						<span class="tag {{includeImplicit ? 'tag-primary' : 'tag-default'}}">{{includeImplicit ? 'yes' : 'no' | translate}}</span>
						<span gdb-tooltip="{{'click.to' | translate}} {{includeImplicit ? 'exclude' : 'include' | translate}} {{'implicit.statements' | translate}}" tooltip-placement="top" ng-click="toggleIncludeImplicit()" class="switch">
	                    <input type="checkbox" class="switch" ng-checked="includeImplicit"/>
	                    <label for="toggleIncludeImplicit"></label>
	                </span>
					</div>
				</div>

				<uib-tabset active="active" ng-show="filteringEnabled">
					<uib-tab>
						<uib-tab-heading class="nav-item"
									 tooltip-placement="bottom"><span class="nav-link">{{'graphs.label' | translate}}</span></uib-tab-heading>
						<div class="included-graphs-filter" ng-include="'js/angular/rdfrank/templates/filter-list.html'" ng-repeat="list in [filterLists.INCLUDED_GRAPHS]"></div>
						<div class="excluded-graphs-filter" ng-include="'js/angular/rdfrank/templates/filter-list.html'" ng-repeat="list in [filterLists.EXCLUDED_GRAPHS]"></div>
					</uib-tab>
					<uib-tab>
						<uib-tab-heading class="nav-item"
									 tooltip-placement="bottom"><span class="nav-link">{{'predicates.label' | translate}}</span></uib-tab-heading>
						<div class="included-predicates-filter" ng-include="'js/angular/rdfrank/templates/filter-list.html'" ng-repeat="list in [filterLists.INCLUDED_PREDICATES]"></div>
						<div class="excluded-predicates-filter" ng-include="'js/angular/rdfrank/templates/filter-list.html'" ng-repeat="list in [filterLists.EXCLUDED_PREDICATES]"></div>
					</uib-tab>
				</uib-tabset>

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