<link href="css/explore.css?v=10.5.1" rel="stylesheet"/>
<div core-errors></div>
<div class="page fit-content-on-mobile" ng-show="getActiveRepository()">
    <div class="resource-info" ng-if="!isTripleResource()">
        <div class="thumb" ng-show="{{details.img}}">
            <a href="{{details.img}}"><img ng-src="{{details.img}}" alt="details image"/></a>
        </div>
        <h1>
            <a href="{{details.uri}}" gdb-tooltip="{{details.uri}}">
                {{details.label ? details.label : getLocalName(details.uri)}}
            </a>

            <a gdb-tooltip="{{'edit.resource.label' | translate}}" href="resource/edit?uri={{details.encodeURI}}"
               ng-if="canWriteActiveRepo(true)"
               class="btn btn-link">
                <span class="icon-edit"></span>
            </a>
        </h1>

        <p ng-show="{{details.comment}}" data-escape="false">{{details.comment}}</p>
        <p>
            <span>{{'source.label' | translate}}:</span>&nbsp;<a href="{{details.uri}}">{{details.uri}}</a>
        </p>
        <p ng-show="isContextAvailable()">
            <span>{{'context.label' | translate}}:</span>&nbsp;<a href="{{details.context}}">{{details.context}}</a>
        </p>
    </div>

    <div class="resource-info" ng-if="isTripleResource()">
        <div class="thumb" ng-show="{{details.img}}">
            <a href="{{details.img}}"><img ng-src="{{details.img}}" alt="details image"/></a>
        </div>
        <h1 fit-text fit-text-min="30">
            <a href="sparql?query=describe%20{{encodeURIComponent(tripleParam)}}" gdb-tooltip="{{tripleParam}}">
                {{getRdfStarLocalNames(tripleParam)}}
            </a>
        </h1>

        <p ng-show="{{details.comment}}" data-escape="false">{{details.comment}}</p>
        <p>
            <span>{{'target.label' | translate}}:</span>&nbsp;<a href="sparql?query=describe%20{{encodeURIComponent(tripleParam)}}">{{tripleParam}}</a>
        </p>
    </div>

    <div class="pull-right">

        <label for="inference-select" class="mb-0">
            <select id="inference-select"
                    ng-options="inf.id as inf.title | translate for inf in inferences" ng-model="inference"
                    ng-change="changeInference(inference)" class="form-control form-control-sm" ng-disabled="loading || role === 'context' || getActiveRepository() === 'SYSTEM'"></select>
        </label>

        <button type="button" class="btn btn-link" ng-model="sameAs"
                ng-class="loading ? 'disabled' : ''"
                ng-show="inference != 'explicit'"
                ng-click="sameAs = !sameAs; exploreResource()"
                uib-popover="{{'sidepanel.expand.results.sameas' | translate}}: {{sameAs ? 'common.on.btn' : 'common.off.btn' | translate}}"
                popover-trigger="mouseenter"
                popover-placement="bottom">
            <span class="icon-2-5x"
                  ng-class="{'icon-sameas-on':sameAs, 'icon-sameas-off':!sameAs}"></span>
        </button>

        <button type="button" class="btn btn-sm" ng-model="blanks"
                ng-class="loading ? 'disabled' : (blanks ? 'btn-primary' : 'btn-secondary')"
                uib-btn-checkbox btn-checkbox-true="true"
                btn-checkbox-false="false" ng-change="exploreResource()">
            {{'show.blank.nodes.label' | translate}}
        </button>

        <div class="btn-group" uib-dropdown is-open="isopen">
            <button type="button" ng-class="loading ? 'disabled' : ''" class="btn btn-sm btn-secondary dropdown-toggle"
                    uib-dropdown-toggle>
                {{'download.as.label' | translate}}
            </button>
            <ul class="dropdown-menu small" role="menu">
                <li ng-repeat="format in formats">
                    <a href="javascript:" ng-click="downloadExport(format)" class="dropdown-item">{{format.name}}</a>
                </li>
            </ul>
        </div>

        <button type="button" role="button" class="btn btn-primary btn-sm"
                uib-popover="{{'explore.graph.visually.popover' | translate}}"
                popover-trigger="mouseenter"
                popover-placement="bottom"
                ng-click="goToGraphsViz()" guide-selector="explore-visual">
            {{'visual.graph.label' | translate}}
        </button>

    </div>

    <div id="selection" class="selection mb-1" ng-init="roles = ['subject', 'predicate', 'object', 'context', 'all']">
        <ul class="nav nav-tabs">
            <li ng-repeat="roleVar in roles" class="nav-item">
                <a class="nav-link" href ng-click="changeRole(roleVar)"
                   ng-class="role === roleVar ? 'active' : (loading ? 'disabled': '')" ng-disabled="loading"
                   guide-selector="role-{{roleVar}}">
                    {{roleVar | translate}}
                </a>
            </li>
        </ul>
    </div>

    <div id="yasr" class="explore">
        <!--<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' guide-selector="yasrResults"></div>
        </div>
    </div>

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

</div>
