<link href="css/explore.css?v=2.7.0-TR3" rel="stylesheet"/>

<div core-errors></div>
<div class="page fit-content-on-mobile">
    <div class="resource-info" ng-if="resourceInfo && !isTripleResource()">
        <div class="thumb" ng-if="resourceInfo.details.img">
            <a href="{{resourceInfo.details.img}}">
                <img ng-src="{{details.img}}" alt="details image"/>
            </a>
        </div>
        <h1>
            <a href="{{resourceInfo.details.uri}}" gdb-tooltip="{{resourceInfo.details.uri}}">
                {{resourceInfo.details.label ? resourceInfo.details.label : getLocalName(resourceInfo.details.uri)}}
            </a>

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

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

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

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

    <div class="pull-right" ng-if="resourceInfo">

        <label for="inference-select" class="mb-0">
            <select id="inference-select"
                    class="form-control form-control-sm"
                    ng-model="currentContextTypeId"
                    ng-change="changeInference(currentContextTypeId)"
                    ng-disabled="loading || resourceInfo.role === 'context' || getActiveRepository() === 'SYSTEM'">
                <option ng-repeat="contextType in contextTypes"
                        value="{{contextType.id}}"
                        ng-selected="resourceInfo.contextType.id === contextType.id">
                    {{contextType.labelKey | translate}}
                </option>
            </select>
        </label>

        <button type="button" class="btn btn-link same-as-btn btn-sm"
                ng-model="sameAs"
                ng-class="loading ? 'disabled' : ''"
                ng-if="resourceInfo.contextType !== ContextTypes.EXPLICIT"
                ng-click="toggleSameAs()"
                uib-popover="{{'sidepanel.expand.results.sameas' | translate}}: {{resourceInfo.sameAs ? 'common.on.btn' : 'common.off.btn' | translate}}"
                popover-trigger="mouseenter"
                popover-placement="bottom">
            <span class="icon-2x" ng-class="{'icon-sameas-on':resourceInfo.sameAs, 'icon-sameas-off':!resourceInfo.sameAs}"></span>
        </button>

        <button type="button"
                class="btn btn-sm show-blank-nodes-btn" ng-model="resourceInfo.blanks"
                ng-class="loading ? 'disabled' : (resourceInfo.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"
                    class="btn btn-sm btn-secondary dropdown-toggle"
                    ng-class="loading ? 'disabled' : ''"
                    uib-dropdown-toggle>
                {{'download.as.label' | translate}}
            </button>
            <ul class="dropdown-menu small" role="menu">
                <li ng-repeat="fileType in fileTypes">
                    <a href="javascript:" ng-click="openJSONLDExportSettings(fileType)" ng-if="fileType.name === 'JSON-LD'" class="dropdown-item">{{fileType.name}}</a>
                    <a href="javascript:" ng-click="downloadExport(fileType)" ng-if="fileType.name !== 'JSON-LD'" class="dropdown-item">{{fileType.name}}</a>
                </li>
            </ul>
        </div>

        <button type="button" role="button" class="btn btn-primary btn-sm visual-graph-btn"
                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-if="resourceInfo">
        <ul class="nav nav-tabs">
            <li ng-repeat="role in roles" class="nav-item">
                <a class="nav-link" href
                   ng-click="changeRole(role)"
                   ng-class="resourceInfo.role === role ? 'active' : (loading ? 'disabled': '')"
                   ng-disabled="loading"
                   guide-selector="role-{{role}}">
                    {{role | translate}}
                </a>
            </li>
        </ul>
    </div>

    <yasgui-component id="query-editor" yasgui-config="yasguiConfig"></yasgui-component>

    <loader-component ng-if="isLoading"></loader-component>
</div>
