<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"/>


<div class="container-fluid">

    <h1>
        {{editSearchQuery ? (viewType === 'text' ? 'edit.search.query':(page === 2 ? 'edit.search.query' : 'edit.analogical.query')) : title | translate}}
        <span ng-hide="editSearchQuery" 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 core-errors></div>
    <div system-repo-warning></div>
    <div class="alert alert-danger" ng-show="repositoryError">
        <p>{{'current.repo.error' | translate}}</p>

        <p>{{repositoryError}}</p>
    </div>

    <ul ng-hide="editSearchQuery" class="nav nav-tabs mb-2">
        <li class="nav-item" id="create-text-index"><a class="nav-link" ng-class="viewType == 'text' ? 'active' : ''" href ng-click="viewType = 'text'"
                data-toggle="tab">{{'text.similarity.index' | translate}}</a></li>
        <li class="nav-item" id="create-predication-index"><a class="nav-link" ng-class="viewType == 'predication' ? 'active' : ''" href ng-click="viewType = 'predication'" data-toggle="tab">
            {{'predication.index' | translate}}</a></li>
    </ul>
    <div class="card mb-2">
      <div class="card-block pt-1">
        <p class="lead">{{'index.name' | translate}}</p>
        <div class="input-group input-group-lg">
          <input ng-disabled="editSearchQuery" required class="form-control similarity-index-name" type="text" placeholder="{{'my.index.name.required' | translate}}" ng-model="newIndex.name">
        </div>
        <div style="margin-top: 5px" ng-show="invalidIndexName" class="idError alert alert-danger">{{invalidIndexName}}</div>

        <button ng-hide="editSearchQuery" class="btn btn-link btn-sm mt-1 px-0 collapsed more-options-btn" data-toggle="collapse" data-target="#more-options">{{'more.options.label' | translate}} <span class="icon-caret-up"></span></button>

        <div class="collapse mt-1" id="more-options" >

          <div class="form-group row">
                <label for="indexParameters" class="col-md-4 col-form-label">{{'semantic.vectors.index.params' | translate}}</label>
                <div class="col-md-8">
      <input class="form-control" type="text" ng-model="newIndex.options" id="indexParameters" placeholder="-vectortype binary">
                    <div class="small text-muted" style="margin-top: 0.5rem">{{'see.full.label' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#create-index-parameters" rel="noopener" target="_blank">{{'list.of.supported.params' | translate}}</a></div>
                </div>
            </div>

          <div class="form-group row" ng-show="viewType == 'text'">
            <label class="col-md-4 col-form-label">{{'stop.words' | translate}}</label>
            <div class="col-md-8">
              <input class="form-control stop-words" type="text" placeholder="{{'default.lucene.stop.list' | translate}}" ng-model="newIndex.stopList">
            </div>
          </div>
          <div class="form-group row" ng-show="viewType == 'text'">
              <label class="col-md-4 col-form-label">{{'analyzer.class' | translate}}</label>
              <div class="col-md-8">
                  <input class="form-control analyzer-class" type="text" ng-model="newIndex.analyzer">
              </div>
          </div>
            <div class="checkbox offset-xs-3 offset-md-4" ng-show="viewType == 'text'">
                <label class="col-xs-6 col-md-6"
                       gdb-tooltip="{{'literal.index.input' | translate}}"
                       tooltip-placement="bottom">
                    <input type="checkbox" class="literal-index" ng-true-value="'true'" ng-false-value="'false'" ng-model="newIndex.isLiteralIndex"/>
                    {{'literal.index.label' | translate}}
                </label>
            </div>
            <div class="form-group row" ng-show="viewType == 'predication'">
                <label class="col-md-4 col-form-label">{{'input.literal.index.label' | translate}}</label>
                <div class="col-md-8">
                    <select class="form-control" ng-options="idx for idx in literalIndexes" ng-model="newIndex.inputIndex"></select>
                </div>
            </div>
        </div>
      </div>
    </div>


    <div class="card">
        <div class="card-block">

            <button 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 ng-hide="editSearchQuery" class="nav-item">
                    <a ng-class="page == 1 ? 'active' : ''" ng-click="goToPage(1)" class="nav-link" href>
                        {{'data.query.label' | translate}}
                    </a>
                </li>
                <li class="nav-item search-query-tab">
                    <a ng-class="page == 2 ? 'active' : ''" ng-click="goToPage(2)" class="nav-link" href>
                        {{'search.query.label' | translate}}
                    </a>
                </li>
                <li class="nav-item analogical-query-tab" ng-show="viewType == 'predication'">
                    <a ng-class="page == 3 ? 'active' : ''" ng-click="goToPage(3)" class="nav-link" href>
                        {{'analogical.query.label' | translate}}
                    </a>
                </li>
            </ul>

            <div>
                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 1">
                    <button class="close absolute" ng-click="toggleHelp(0)"></button>
                    <p class="lead">
                        {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.determines.data.index' | translate}}
                    </p>

                    <p>{{'query.must' | translate}} <span class="small-caps">SELECT</span> {{'the.following.bindings' | translate}}</p>
                    <ul ng-show="viewType == 'text'">
                        <li><code>?documentID</code> {{'determines.id.indexed.doc' | translate}}</li>
                        <li><code>?documentText</code> {{'determines.doc.content' | translate}}</li>
                    </ul>
                    <ul ng-show="viewType == 'predication'">
                        <li><code>?subject</code></li>
                        <li><code>?predicate</code></li>
                        <li><code>?object</code></li>
                    </ul>

                    {{'query.execution.info' | translate}}
                </div>

                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 2">
                    <button class="close absolute" ng-click="toggleHelp(0)"></button>
                    <p class="lead">
                        {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.fetch.on.search' | translate}}
                    </p>

                    {{'query.execution.on.search' | translate}}
                </div>

                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 3">
                    <button class="close absolute" ng-click="toggleHelp(0)"></button>
                    <p class="lead">
                        {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.fetch.analogical.search' | translate}}
                    </p>

                    {{'analogical.search.info' | translate}}
                </div>

                <div class="row">
                    <div class="col-md-9">
                        <query-editor nostorage notabs notoolbar-saved notoolbar-copy nostatus nocount norun callback-on-change="updateDirty">
                        </query-editor>
                    </div>
                    <div class="col-md-3" ng-show="page == 1">
                        <p>{{'sample.queries' | translate}} </p>

                        <div class="list-group">
                            <div ng-repeat="(sampleKey, sampleValue) in samples">
                                <a href="#" ng-click="setQuery(sampleValue)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="sampleKey"></strong>
                                    <samp class="text-muted small">{{sampleValue}}</samp>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="clearfix">
                <div class="pull-right">
                    <a ng-href="similarity" class="btn btn-lg btn-secondary"
                       uib-popover="{{getCloseBtnMsg()}}"
                       popover-placement="top"
                       popover-trigger="mouseenter">
                        {{'common.cancel.btn' | translate}}
                    </a>
                    <button ng-if="!editSearchQuery" class="btn btn-lg btn-primary create-similarity-index-btn" ng-click="createIndex()"
                            uib-popover="{{'create.index.label' | translate}}"
                            popover-placement="top"
                            popover-trigger="mouseenter">
                        {{'common.create.btn' | translate}}
                    </button>
                    <button ng-if="editSearchQuery" class="btn btn-lg btn-primary save-query-btn" ng-click="saveSearchQuery()"
                            uib-popover="{{'core.edit.query' | translate}}"
                            popover-placement="top"
                            popover-trigger="mouseenter">
                        {{'common.save.btn' | translate}}
                    </button>
                </div>
                <div class="pull-left">
                  <button ng-if="!editSearchQuery" type="button" class="btn btn-link pull-left" ng-click="viewQuery()">{{'view.index.query' | translate}}</button>
                  <button class="btn btn-link test-query-btn" ng-click="showPreview()" ng-hide="viewMode == 'editor' || page != 1"
                          uib-popover="{{'preview.results' | translate}}"
                          popover-placement="top"
                          popover-trigger="mouseenter">
                      {{'test.query.btn' | translate}}
                  </button>
                  <button class="btn btn-link" ng-click="showEditor()" ng-show="viewMode == 'editor' && page == 1"
                          uib-popover="{{'closes.preview' | translate}}"
                          popover-placement="top"
                          popover-trigger="mouseenter">
                      {{'core.edit.query' | translate}}
                  </button>
                </div>
            </div>
    </div>
</div>
</div>
