<link href="css/lib/angular-xeditable/xeditable.min.css?v=10.5.1" rel="stylesheet">

<link href="css/lib/yasqe.min.css?v=10.5.1" rel="stylesheet"/>

<link href="css/new-sparql.css?v=10.5.1" rel="stylesheet"/>

<link href="css/graphs-config.css?v=10.5.1" rel="stylesheet"/>

<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 class="card mb-2">
    <div class="card-block" style="padding-top: 1rem">
        <p class="lead">{{'config.name.label' | translate}}</p>
        <div class="input-group input-group-lg">
            <input required class="form-control graph-config-name" type="text" placeholder="{{'graph.config.required' | translate}}" ng-model="newConfig.name" >
        </div>
        <br/>
        <p>{{'description.text' | translate}}</p>
        <div class="input-group input-group-lg">
            <input class="form-control graph-config-description" type="text"
                   placeholder="{{'enter.description' | translate}}"
                   ng-model="newConfig.description" >
        </div>
        <div ng-if="newConfig.startMode === 'search'">
            <br/>
            <p>{{'hint.label' | translate}}</p>
            <div class="input-group input-group-lg">
                <input  class="form-control graph-config-example" type="text"
                        placeholder="{{'add.hint.prompt' | translate}}"
                        ng-model="newConfig.hint" >
            </div>
        </div>
    </div>
</div>

<div>
    <button ng-show="page != 1" type="button" class="btn btn-link pull-right" ng-click="toggleHelp()">
        <span class="icon-help" uib-popover="{{'toggle.help' | translate}}"
                                popover-placement="top"
                                popover-trigger="mouseenter">
        </span>
        <span class="hidden-lg-down">{{'menu.help.label' | translate}}</span></button>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a ng-class="page == 1 ? 'active' : ''" ng-click="goToPage(1)" class="nav-link page-1-link" href>
                {{'starting.point.label' | translate}}
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 2 ? 'active' : ''" ng-click="goToPage(2)" class="nav-link page-2-link" href>
                {{'graph.expansion' | translate}}
            </a>
        </li>

        <li class="nav-item">
            <a ng-class="page == 3 ? 'active' : ''" ng-click="goToPage(3)" class="nav-link page-3-link" href>
                {{'node.basics' | translate}}
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 4 ? 'active' : ''" ng-click="goToPage(4)" class="nav-link page-4-link" href>
                {{'edge.basics' | translate}}
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 5 ? 'active' : ''" ng-click="goToPage(5)" class="nav-link page-5-link" href>
                {{'node.extra' | translate}}
            </a>
        </li>
    </ul>
</div>
<div class="card" style="border-top: none">
    <div class="card-block">
        <div>
                <div class="image-label-container mb-3" ng-show="page == 1">
                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'search'}">
                        <input type="radio" class="form-check-input" id="checkboxSuccessSearch" ng-model="newConfig.startMode" value="search">
                        <img class="image-label-image" src="css/images/search.png?v=10.5.1" alt="search image" width="100%">
                        <div class="image-label-content">
                            <h5>{{'start.with.search.box' | translate}}</h5>
                            <div>{{'choose.starting.point' | translate}}</div>
                        </div>
                    </label>

                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'node'}">
                        <input type="radio" class="form-check-input" id="checkboxSuccessNode" ng-model="newConfig.startMode" value="node">
                        <img class="image-label-image" src="css/images/node.png?v=10.5.1" alt="node image" width="100%">
                        <div class="image-label-content">
                            <h5>{{'start.with.fixed.node' | translate}}</h5>
                            <div>{{'visual.graph.start' | translate}}</div>
                        </div>
                    </label>

                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'query'}">
                        <input type="radio" class="form-check-input" data-cy="graph-config-by-graph-query-checkbox" ng-model="newConfig.startMode" value="query">
                        <img class="image-label-image" src="css/images/query.png?v=10.5.1" alt="query image" width="100%">
                        <div class="image-label-content">
                            <h5>{{'query.results.start' | translate}}</h5>
                            <div>{{'results.start' | translate}}</div>
                        </div>
                    </label>
                </div>

                <div class="form-group card mb-2" ng-show="newConfig.startMode == 'node' && page == 1">
                    <div class="card-block">
                        <p class="lead" ng-show="newConfig.startIRI">
                            <strong>{{'selected.node' | translate}}</strong>
                            <code ng-bind="newConfig.startIRILabel ? newConfig.startIRILabel + '<' + newConfig.startIRI + '>' : newConfig.startIRI"></code>
                            <em ng-hide="newConfig.startIRI" class="text-muted">{{'no.node.selected' | translate}}</em>
                        </p>
                        <p class="lead" ng-hide="newConfig.startIRI">
                            <strong>{{'no.node.selected' | translate}}</strong>
                        </p>
                        <search-resource-input
                            namespacespromise="getNamespacesPromise"
                            placeholder="{{'search.start.rdf.node' | translate}}"
                            autocompletepromisestatus="getAutocompletePromise"
                            text-button=""
                            visual-button=""
                            visual-callback="fixedVisualCallback(uri, label)"
                            empty="empty">
                        </search-resource-input>
                    </div>
                </div>
                <!-- help info boxes -->
                <div uib-collapse="helpHidden" class="alert alert-info no-icon p-1 mb-2" ng-if="page != 1">
                    <div class="d-flex" ng-if="page == 2">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">{{'this.is.a' | translate}} <span class="small-caps">CONSTRUCT</span> {{'construct.query.explanation' | translate}}</p>

                            <p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}</p>

                            <p>{{'optional.query' | translate}} <em>{{getSampleName(samples[0], 'expandQuery')}}</em> {{'sample.query.used' | translate}}</p>
                        </div>
                        <div>
                            <img src="css/images/expand.png?v=10.5.1" class="info-box-img" height="220" alt="expand image">
                        </div>
                    </div>



                    <div class="d-flex" ng-if="page == 3">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">
                                {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.node.basic.info' | translate}}
                            </p>

                            <p>{{'query.must' | translate}} <span class="small-caps">SELECT</span> {{'one.or.more.bindings' | translate}}</p>
                            <ul>
                                <li><code>?type</code> {{'determines.color' | translate}}</li>
                                <li><code>?label</code> {{'determines.label' | translate}}</li>
                                <li><code>?comment</code> {{'determines.description' | translate}}</li>
                                <li><code>?rank</code> {{'determines.size' | translate}}</li>
                            </ul>

                            <p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}</p>

                            <p>{{'optional.query' | translate}} <em>{{getSampleName(samples[0], 'resourceQuery')}}</em> {{'sample.query.used' | translate}}</p>
                        </div>
                        <div>
                            <img src="css/images/labels-size.png?v=10.5.1" class="info-box-img" height="220" alt="labels size image">
                        </div>
                    </div>

                    <div class="d-flex" ng-if="page == 4">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">{{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.edge.basic.info' | translate}}</p>

                            <p>{{'query.must' | translate}} <span class="small-caps">SELECT</span> {{'this.binding' | translate}}</p>
                            <ul>
                                <li><code>?label</code> {{'determines.label.edge' | translate}}</li>
                            </ul>

                            <p>{{'the.sentence.start' | translate}} <code>?edge</code> {{'variable.required.edge' | translate}}</p>

                            <p>{{'query.is.optional.local.name' | translate}}</p>
                        </div>
                        <div>
                            <img src="css/images/predicates.png?v=10.5.1" class="info-box-img" height="220" alt="predicates image">
                        </div>
                    </div>

                    <div class="d-flex" ng-if="page == 5">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">{{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'extra.properties.shown.node' | translate}}</p>

                            <p>{{'query.must' | translate}} <span class="small-caps">SELECT</span> {{'these.bindings' | translate}}</p>
                            <ul>
                                <li><code>?property</code> {{'name.of.each.property' | translate}}</li>
                                <li><code>?value</code> {{'value.of.each.property' | translate}}</li>
                            </ul>

                            <p>{{'query.may.also' | translate}} <span class="small-caps">SELECT</span> {{'this.binding' | translate}}</p>
                            <ul>
                                <li><code>?image</code> {{'url.to.image.properties' | translate}}</li>
                            </ul>

                            <p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required.viewed.node' | translate}}</p>

                            <p>{{'optional.query' | translate}} <em>{{getSampleName(samples[0], 'resourcePropertiesQuery')}}</em> {{'sample.query.used' | translate}}</p>
                        </div>
                        <div>
                            <img src="css/images/side-panel.png?v=10.5.1" class="info-box-img" height="220" alt="side panel image">
                        </div>
                    </div>

                </div>


                <div class="form-group row" ng-hide="page == 1 && newConfig.startMode != 'query'">
                    <div class="col-md-9">
                        <query-editor nostorage notabs notoolbar-saved notoolbar-copy nostatus nocount norun callback-on-change="updateDirty" data-cy="query-editor">
                        </query-editor>
                    </div>
                    <div class="col-md-3">
                        <p>{{'sample.queries' | translate}} </p>

                        <div ng-show="page == 1" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.startGraphQuery" ng-click="setQuery(sample.startGraphQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'startGraphQuery')"></strong>
                                    <samp class="text-muted small">{{sample.startGraphQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 2" class="list-group expand-samples">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.expandQuery" ng-click="setQuery(sample.expandQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'expandQuery')"></strong>
                                    <samp class="text-muted small">{{sample.expandQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 3" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.resourceQuery" ng-click="setQuery(sample.resourceQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourceQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourceQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 4" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.predicateLabelQuery" ng-click="setQuery(sample.predicateLabelQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'predicateLabelQuery')"></strong>
                                    <samp class="text-muted small">{{sample.predicateLabelQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 5" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.resourcePropertiesQuery" ng-click="setQuery(sample.resourcePropertiesQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourcePropertiesQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourcePropertiesQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <p class="mt-1">{{'user.queries' | translate}} </p>

                        <div ng-show="page == 1" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.startGraphQuery" ng-click="setQuery(sample.startGraphQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'startGraphQuery')"></strong>
                                    <samp class="text-muted small">{{sample.startGraphQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 2" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.expandQuery" ng-click="setQuery(sample.expandQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'expandQuery')"></strong>
                                    <samp class="text-muted small">{{sample.expandQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 3" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.resourceQuery" ng-click="setQuery(sample.resourceQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourceQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourceQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 4" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.predicateLabelQuery" ng-click="setQuery(sample.predicateLabelQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'predicateLabelQuery')"></strong>
                                    <samp class="text-muted small">{{sample.predicateLabelQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 5" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.resourcePropertiesQuery" ng-click="setQuery(sample.resourcePropertiesQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourcePropertiesQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourcePropertiesQuery}}</samp>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

<div class="m-0 clearfix" style="padding-bottom: 2rem">
    <div>
        <label for="share-graph-config"
               gdb-tooltip="{{'visual.graph.other.users.see' | translate}}">
            <input id="share-graph-config" type="checkbox" ng-model="newConfig.shared">
            {{'share.visual.graph' | translate}}
        </label>
    </div>
    <div class="pull-left">
        <button href ng-show="page > 1" ng-click="goToPreviousPage()" class="btn btn-lg btn-secondary"
                uib-popover="{{'previous.config.step' | translate}}"
                popover-placement="top"
                popover-trigger="mouseenter"> <span class="icon-arrow-left"></span> {{'previous.btn' | translate}} </button>

        <button href ng-show="page < totalPages" ng-click="goToNextPage()" class="btn btn-lg btn-secondary"
                uib-popover="{{'next.config.step' | translate}}"
                popover-placement="top"
                popover-trigger="mouseenter"> {{'next.btn' | translate}} <span class="icon-arrow-right"></span></button>

        <button class="btn btn-lg btn-secondary" ng-click="showPreview()" ng-hide="viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
            uib-popover="{{'preview.results' | translate}}"
            popover-placement="top"
            popover-trigger="mouseenter">
            {{'common.preview' | translate}}
        </button>
        <button class="btn btn-lg btn-secondary" ng-click="showEditor()" ng-show="viewMode == 'editor' && (page != 1 || newConfig.startMode == 'query')"
            uib-popover="{{'closes.preview' | translate}}"
            popover-placement="top"
            popover-trigger="mouseenter">
            {{'core.edit.query' | translate}}
        </button>
        <button class="btn btn-lg btn-secondary" ng-click="revertEditor()" ng-disabled="!queryEditorIsDirty" ng-hide="!revertConfig || viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
                uib-popover="{{'reverts.changes' | translate}}"
                popover-placement="top"
                popover-trigger="mouseenter">
            {{'revert.changes.btn' | translate}}
        </button>
    </div>
    <div class="pull-right">
        <a ng-href="graphs-visualizations/" class="btn btn-lg btn-secondary"
            uib-popover="{{'closes.config.no.save' | translate}}"
            popover-placement="top"
            popover-trigger="mouseenter">
            {{'common.cancel.btn' | translate}}
        </a>
        <a href ng-click="saveGraphConfig()" class="btn btn-lg btn-primary btn-save-config"
           uib-popover="{{'closes.config.save' | translate}}"
           popover-placement="top"
           popover-trigger="mouseenter">
            {{'common.save.btn' | translate}}
        </a>
    </div>
</div>
