<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div ng-show="!isSchemaDesignerEnabled">
  <p class="error-msg"><img src="img/ico/prohibition.png"/>&nbsp;Current user not authorized to use the Schema Designer!</p>
</div>
<div id="designer" ng-show="isSchemaDesignerEnabled">
  <div class="clearfix">
    <div id="designer-top">
    <div id="actions" class="actions">

      <div id="schema-selector">
        <div class="left">
          <select id="select-schema" placeholder-text-single="'Schema Selector'"
                chosen
                ng-model="currentSchema"
                ng-change="loadSchema()"
                ng-options="schema for schema in schemas"><option value=""></option></select>
          <button id="add" class="action" ng-click="showNewSchemaDialog()"><span>New Schema</span></button>
        </div>
        <div class="middle">
          <div id="schema-actions" class="schema-actions clearfix">
            <button id="addField" class="action" ng-click="toggleAddField('field')" ng-show="showSchemaActions"><span>Add Field</span></button>
            <button id="addFieldType" class="action" ng-click="toggleAddField('type')" ng-show="showSchemaActions"><span>Add Field Type</span></button>
            <div id="updateStatusMessage" ng-class="{working: updateWorking}" ng-show="updateStatusMessage"><span>{{updateStatusMessage}}</span></div>

            <div class="action add" data-rel="add" ng-show="showAddField" escape-pressed="hideAll()">

              <p class="clearfix"><label for="add_name">name:</label>
                <input type="text" id="add_name" ng-model="newField.name" focus-when="showAddField" placeholder="enter a name"></p>

              <p class="clearfix" ng-show="adding=='field'"><label for="add_type">field type:</label>
                <select chosen type="text" id="add_type" ng-model="newField.type" ng-options="type for type in types"><option value=""></option></select>
              </p>
              <p class="clearfix" ng-show="adding=='type'"><label for="add_class">class:</label>
                <input type="text" id="add_class" ng-model="newField.class" placeholder="class name"></p>

              <p class="clearfix" ng-show="adding=='field'"><label for="add_default">default:</label>
                <input type="text" id="add_default" ng-model="newField.default" placeholder="enter a default value if needed"></p>

              <p class="clearfix">
                <label class="checkbox" for="add_stored">
                  <input type="checkbox" ng-model="newField.stored" id="add_stored" title="Full field should be stored in index." ng-true-value="'true'" ng-false-value="'false'">
                  stored
                </label>
              </p>

              <p class="clearfix">
                <label class="checkbox" for="add_indexed">
                  <input type="checkbox" ng-model="newField.indexed" id="add_indexed" title="Field should be indexed." ng-true-value="'true'" ng-false-value="'false'">
                  indexed
                </label>
              </p>

              <p class="clearfix">
                <label class="checkbox" for="add_uninvertible">
                  <input type="checkbox" ng-model="newField.uninvertible" id="add_uninvertible" title="Field should be uninvertible, it is generally recomended to use docValues instead."
                         ng-true-value="'true'" ng-false-value="'false'">
                  uninvertible
                </label>
              </p>

              <p class="clearfix">
                <label class="checkbox" for="add_docValues">
                  <input type="checkbox" ng-model="newField.docValues" id="add_docValues" title="DocValues should be stored for the field." ng-true-value="'true'" ng-false-value="'false'">
                  docValues
                </label>
              </p>

              <p class="clearfix">
                <label class="checkbox" for="add_multiValued">
                  <input type="checkbox" ng-model="newField.multiValued" id="add_multiValued" title="Multiple values are allowed for this field." ng-true-value="'true'" ng-false-value="'false'">
                  multiValued
                </label>
              </p>

              <p class="clearfix" ng-show="adding=='field'">
                <label class="checkbox" for="add_required">
                  <input type="checkbox" ng-model="newField.required" id="add_required" title="Field must be provided for all documents." ng-true-value="'true'" ng-false-value="'false'">
                  required
                </label>
              </p>

              <p class="clearfix">
                <a ng-click="showOmit=!showOmit">
                  <span class="add_showhide" ng-hide="showOmit">Show omit options</span>
                  <span class="add_showhide open" ng-show="showOmit">Hide omit options</span>
                </a>
              </p>

              <div ng-show="showOmit">

                <p class="clearfix">
                  <label class="checkbox" for="add_omitNorms">
                    <input type="checkbox" ng-model="newField.omitNorms" id="add_omitNorms" title="Full field should be omitNorms in index." ng-true-value="'true'" ng-false-value="'false'">
                    omitNorms
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_omitTermFreqAndPositions">
                    <input type="checkbox" ng-model="newField.omitTermFreqAndPositions" id="add_omitTermFreqAndPositions" title="Full field should be omitTermFreqAndPositions in index."
                           ng-true-value="'true'" ng-false-value="'false'">
                    omitTermFreqAndPositions
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_omitPositions">
                    <input type="checkbox" ng-model="newField.omitPositions" id="add_omitPositions" title="Full field should be omitPositions in index." ng-true-value="'true'" ng-false-value="'false'">
                    omitPositions
                  </label>
                </p>
              </div>

              <p class="clearfix">
                <a ng-click="showTermVectors=!showTermVectors">
                  <span class="add_showhide" ng-hide="showTermVectors">Show term vector options</span>
                  <span class="add_showhide open" ng-show="showTermVectors">Hide term vector options</span>
                </a>
              </p>
              <div ng-show="showTermVectors">

                <p class="clearfix">
                  <label class="checkbox" for="add_termVectors">
                    <input type="checkbox" ng-model="newField.termVectors" id="add_termVectors" title="Full field should be termVectors in index." ng-true-value="'true'" ng-false-value="'false'">
                    termVectors
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_termPositions">
                    <input type="checkbox" ng-model="newField.termPositions" id="add_termPositions" title="Full field should be termPositions in index." ng-true-value="'true'" ng-false-value="'false'">
                    termPositions
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_termOffsets">
                    <input type="checkbox" ng-model="newField.termOffsets" id="add_termOffsets" title="Full field should be termOffsets in index." ng-true-value="'true'" ng-false-value="'false'">
                    termOffsets
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_termPayloads">
                    <input type="checkbox" ng-model="newField.termPayloads" id="add_termPayloads" title="Full field should be termPayloads in index." ng-true-value="'true'" ng-false-value="'false'">
                    termPayloads
                  </label>
                </p>

              </div>

              <p class="clearfix">
                <a ng-click="showSort=!showSort">
                  <span class="add_showhide" ng-hide="showSort">Show sort options</span>
                  <span class="add_showhide open" ng-show="showSort">Show sort options</span>
                </a>
              </p>
              <div ng-show="showSort">
                <p class="clearfix">
                  <label class="checkbox" for="add_sortMissingFirst">
                    <input type="checkbox" ng-model="newField.sortMissingFirst" id="add_sortMissingFirst" title="Full field should be sortMissingFirst in index." ng-true-value="'true'"
                           ng-false-value="'false'">
                    sortMissingFirst
                  </label>
                </p>

                <p class="clearfix">
                  <label class="checkbox" for="add_sortMissingLast">
                    <input type="checkbox" ng-model="newField.sortMissingLast" id="add_sortMissingLast" title="Full field should be sortMissingLast in index." ng-true-value="'true'"
                           ng-false-value="'false'">
                    sortMissingLast
                  </label>
                </p>

              </div>

              <p class="clearfix" ng-show="adding=='type'">
                <a ng-click="showAnalysisJson=!showAnalysisJson">
                  <span class="add_showhide" ng-hide="showAnalysisJson">Show text analysis JSON</span>
                  <span class="add_showhide open" ng-show="showAnalysisJson">Hide text analysis JSON</span>
                </a>
              </p>
              <div ng-show="showAnalysisJson">
                  <textarea ng-model="textAnalysisJson" name="add_analysis_json" id="add_analysis_json" title="Text Analysis JSON" rows="8" cols="40" placeholder=""></textarea>
              </div>

              <p class="clearfix buttons">
                <button type="submit" class="submit" ng-class="{success: added}" ng-click="addField()"><span>Add</span></button>
                <button type="reset" class="reset" ng-click="toggleAddField()"><span>Cancel</span></button>
              </p>

              <div id="add-errors">
                <div ng-repeat="error in addErrors" ng-show="addErrors" class="error"><span>{{error}}</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div ng-show="showSchemaActions">
          <button class="action diff-button" ng-click="toggleDiff($event)"><span>Show Changes</span></button>
          <button class="action publish-button" ng-click="togglePublish($event)"><span>Publish</span></button>
          <button id="download-button" class="action" ng-click="downloadConfig()"><span>Download Config</span></button>
          </div>
        </div>
      </div>

      <div id="error-dialog" class="error-dialog" ng-show="designerAPIError">
        <div id="error-dialog-note"><p class="clearfix"><img src="img/ico/prohibition.png"/>&nbsp;{{designerAPIError}}</p></div>
        <div id="error-dialog-details"><div ng-show="designerAPIErrorDetails"><textarea rows="10" cols="55">{{designerAPIErrorDetails}}</textarea></div></div>
        <div id="error-dialog-buttons" class="clearfix">
          <button type="reset" class="reload-error-button" ng-click="closeErrorDialog()" ng-show="isVersionMismatch"><span>Reload Schema</span></button>
          <button type="reset" class="error-button" ng-click="closeErrorDialog()" ng-show="!isVersionMismatch"><span>OK</span></button>
        </div>
      </div>

      <div id="warn-dialog" class="warn-dialog" ng-show="apiWarning">
        <div id="warn-dialog-note"><p class="clearfix"><img src="img/ico/exclamation-button.png"/>&nbsp;{{apiWarning}}</p></div>
        <div id="warn-dialog-details"><div ng-show="apiWarningDetails"><textarea rows="10" cols="55">{{apiWarningDetails}}</textarea></div></div>
        <div id="warn-dialog-buttons" class="clearfix">
          <button type="reset" class="warn-button" ng-click="closeWarnDialog()"><span>OK</span></button>
        </div>
      </div>

      <div id="show-diff-dialog" class="diff" ng-show="showDiff">
        <div ng-hide="schemaDiffExists" ng-show="!schemaDiffExists">
          <p class="clearfix diff-text">No differences with {{diffSource}} found.</p>
        </div>
        {{fieldsDiff=schemaDiff.fieldsDiff;""}}
        <p class="clearfix diff-text" ng-show="schemaDiffExists">Found differences with {{diffSource}}:</p>
        <div id="fields-diff" ng-hide="fieldsDiff == null" ng-show="Object.keys(fieldsDiff).length > 0">
          <div id="fields-updated" ng-hide="fieldsDiff.updated == null" ng-show="Object.keys(fieldsDiff.updated).length > 0">
            <p class="clearfix diff-text">Updated Fields</p>
            <table class="diff">
              <tr>
                <th>Name</th>
                <th>Old</th>
                <th>New</th>
              </tr>
              <tr ng-repeat="(field, fieldDiff) in fieldsDiff.updated">
                <td>{{ field }}</td>
                <td><p class="old-value">{{fieldDiff[0] | json}}</p></td>
                <td><p class="new-value">{{fieldDiff[1] | json}}</p></td>
              </tr>
            </table>
          </div>
          <div id="fields-added" ng-show="schemaDiff.addedFields.length > 0">
            <p class="clearfix diff-text">New Fields</p>
            <table border="0" cellspacing="0" cellpadding="0">
              <tbody>
              <tr ng-class="{odd:$odd}">
                <th class="prop-hdr">Name</th>
                <th class="prop-hdr">Type</th>
                <th class="prop-hdr-flag">Indexed</th>
                <th class="prop-hdr-flag">Stored</th>
                <th class="prop-hdr-flag">MultiValued</th>
                <th class="prop-hdr-flag">DocValues</th>
                <th class="prop-hdr-flag">Tokenized</th>
              </tr>
              <tr ng-repeat="f in schemaDiff.addedFields" ng-class="{odd:$odd}">
                <td class="prop">{{f.name}}</td>
                <td class="prop">{{f.type}}</td>
                <td class="prop-flag"><span ng-show="f.indexed"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.stored"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.multiValued"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.docValues"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.tokenized"><img src="img/ico/tick.png"/></span></td>
              </tr>
              </tbody>
            </table>
          </div>
          <div id="fields-removed" ng-show="schemaDiff.removedFields.length > 0">
            <p class="clearfix diff-text">Removed Fields</p>
            <ul>
              <li class="clearfix element" ng-repeat="f in schemaDiff.removedFields">
                <p class="rem-value"> {{f}} </p>
              </li>
            </ul>
          </div>
        </div>
        {{fieldTypesDiff=schemaDiff.fieldTypesDiff;""}}
        <div id="fieldtypes-diff" ng-hide="fieldTypesDiff == null" ng-show="Object.keys(fieldTypesDiff).length > 0">
          <div id="fieldtypes-updated" ng-hide="fieldTypesDiff.updated == null" ng-show="Object.keys(fieldTypesDiff.updated).length > 0">
            <p class="clearfix diff-text">Updated Field Types</p>
            <table class="diff" ng-show="Object.keys(fieldTypesDiff.updated).length > 0">
              <tr>
                <th>Name</th>
                <th>Old</th>
                <th>New</th>
              </tr>
              <tr ng-repeat="(fieldType, fieldTypeDiff) in fieldTypesDiff.updated">
                <td>{{ fieldType }}</td>
                <td><p class="old-value">{{fieldTypeDiff[0] | json}}</p></td>
                <td><p class="new-value">{{fieldTypeDiff[1] | json}}</p></td>
              </tr>
            </table>
          </div>
          <div id="fieldtypes-added" ng-hide="fieldTypesDiff.added == null" ng-show="Object.keys(fieldTypesDiff.added).length > 0">
            <p class="clearfix diff-text">New Field Types</p>
            <ul>
              <li class="clearfix element" ng-repeat="fieldtype in fieldTypesDiff.added">
                <p class="new-value"> {{fieldtype | json}} </p>
              </li>
            </ul>
          </div>
          <div id="fieldtypes-removed" ng-show="schemaDiff.removedTypes.length > 0">
            <p class="clearfix diff-text">Removed Field Types</p>
            <ul>
              <li class="clearfix element" ng-repeat="fieldtype in schemaDiff.removedTypes">
                <p class="rem-value"> {{fieldtype}} </p>
              </li>
            </ul>
          </div>
        </div>
        {{dynamicFieldsDiff=schemaDiff.dynamicFieldsDiff;""}}
        <div id="dynamicfields-diff" ng-hide="dynamicFieldsDiff == null" ng-show="Object.keys(dynamicFieldsDiff).length > 0">
          <div id="dynamicfields-updated" ng-hide="dynamicFieldsDiff.updated == null" ng-show="Object.keys(dynamicFieldsDiff.updated).length > 0">
            <p class="clearfix diff-text">Updated Dynamic Fields</p>
            <table class="diff">
              <tr>
                <th>Name</th>
                <th>Old</th>
                <th>New</th>
              </tr>
              <tr ng-repeat="(dfield, dfieldDiff) in dynamicFieldsDiff.updated">
                <td>{{ dfield }}</td>
                <td><p class="old-value">{{dfieldDiff[0] | json}}</p></td>
                <td><p class="new-value">{{dfieldDiff[1] | json}}</p></td>
              </tr>
            </table>
          </div>
          <div id="dynamicfields-added" ng-hide="dynamicFieldsDiff.added == null" ng-show="Object.keys(dynamicFieldsDiff.added).length > 0">
            <p class="clearfix diff-text">New Dynamic Fields</p>
            <ul>
              <li class="clearfix" ng-repeat="dfield in dynamicFieldsDiff.added">
                <p class="new-value"> {{dfield | json}} </p>
              </li>
            </ul>
          </div>
          <div id="dynamicfields-removed" ng-hide="dynamicFieldsDiff.removed == null" ng-show="Object.keys(dynamicFieldsDiff.removed).length > 0">
            <p class="clearfix diff-text">Removed Dynamic Fields</p>
            <ul>
              <li class="clearfix" ng-repeat="dfield in dynamicFieldsDiff.removed">
                <p class="rem-value"> {{dfield.name}} </p>
              </li>
            </ul>
          </div>
        </div>
        {{copyFieldsDiff=schemaDiff.copyFieldsDiff;""}}
        <div id="copyfields-diff" ng-hide="copyFieldsDiff == null" ng-show="Object.keys(copyFieldsDiff).length > 0">
          <p class="clearfix diff-text">Copy Fields</p>
          <table class="diff" ng-show="copyFieldsDiff.old.length > 0 || copyFieldsDiff.new.length > 0">
            <tr>
              <th>Source</th>
              <th>Destination</th>
            </tr>
            <tr ng-show="copyFieldsDiff.old.length > 0" ng-repeat="cfield in copyFieldsDiff.old">
              <td><p class="old-value">{{cfield.source}}</p></td>
              <td><p class="old-value">{{cfield.dest}}</p></td>
            </tr>
            <tr ng-show="copyFieldsDiff.new.length > 0" ng-repeat="cfield in copyFieldsDiff.new">
              <td><p class="new-value">{{cfield.source}}</p></td>
              <td><p class="new-value">{{cfield.dest}}</p></td>
            </tr>
          </table>
        </div>

        <div class="clearfix diff-buttons">
          <button type="reset" class="reset" ng-click="toggleDiff()"><span>Close</span></button>
        </div>
      </div>

      <div id="publish-dialog" class="publish" ng-show="showPublish" escape-pressed="hideAll()">
        <div id="publish-dialog-note"><p class="clearfix">Publish schema and associated configs to Zookeeper as a Solr ConfigSet.</p></div>
        <div id="publish-affected">
          <p class="clearfix">Affected collections:</p>
          <ul>
            <li class="clearfix" ng-repeat="coll in collectionsForConfig">{{coll}}</li>
          </ul>
          <div ng-show="collectionsForConfig.length == 0" class="clearfix">No existing collections</div>
        </div>
        <div id="reload-form">
        <div class="field-form" ng-show="collectionsForConfig.length > 0">
          <input type="checkbox" ng-model="reloadOnPublish" id="reload_on_publish" title="reload affected collections" ng-true-value="'true'" ng-false-value="'false'"/>
          <label for="reload_on_publish" class="checkbox" title="Reload affected collections">Reload affected collections?</label>
        </div>
        </div>

        <div id="publish-new-coll">
          <p>Add new collection with published config?</p>
          <form>
            <p class="clearfix"><label for="add_coll_name">name:</label>
              <input type="text" name="name" id="add_coll_name" ng-model="newCollection.name" placeholder="new collection"></p>

            <p class="clearfix"><label for="add_coll_numShards">numShards:</label>
              <input type="text" name="numShards" id="add_coll_numShards" ng-model="newCollection.numShards"></p>

            <p class="clearfix"><label for="add_coll_replicationFactor">replicationFactor:</label>
              <input type="text" name="replicationFactor" id="add_coll_replicationFactor" ng-model="newCollection.replicationFactor"></p>
          </form>
          <div class="field-form">
            <input type="checkbox" ng-model="newCollection.indexToCollection" id="add_coll_index_sample" title="index sample docs" ng-true-value="'true'" ng-false-value="'false'"/>
            <label for="add_coll_index_sample" class="checkbox" title="Index sample docs">Index sample docs in new collection?</label>
          </div>
        </div>
        <div class="field-form">
          <input type="checkbox" ng-model="disableDesigner" id="disable_designer" title="Disable future changes in schema designer" ng-true-value="'true'" ng-false-value="'false'"/>
          <label for="disable_designer" class="checkbox" title="Disable future changes in schema designer">Disable future changes by the schema designer?</label>
        </div>
        <div ng-repeat="error in publishErrors" ng-show="publishErrors" class="clearfix note error"><span>{{error}}</span></div>
        <div class="clearfix publish-buttons">
          <button type="submit" class="action publish-button" ng-click="doPublish()"><span>Publish</span></button>
          <button type="reset" class="reset" ng-click="togglePublish()"><span>Cancel</span></button>
        </div>
      </div>

      <div id="confirm-dialog" class="action add" data-rel="add" ng-show="showConfirmEditSchema" style="display:block;">
        <p class="clearfix warn"><span>Warning: You've chosen to load an existing schema that is already being used by active collections. Making changes to the '{{confirmSchema}}' schema will impact existing documents in these collections. Please proceed with caution.<br/><br/></span></p>
        <p class="clearfix">Collections using the {{confirmSchema}} schema:</p>
        <ul id="confirm-colls"><li class="clearfix" ng-repeat="coll in collectionsForConfig">{{coll}}</li></ul>
        <p class="clearfix buttons">
          <button id="confirm-edit" type="submit" class="submit" ng-click="confirmEditSchema()"><span>Proceed, I understand the risks</span></button>
          <button type="reset" class="reset" ng-click="cancelEditSchema()"><span>Cancel</span></button>
        </p>
      </div>

      <div class="action add" data-rel="add" ng-show="showNewSchema" style="display:block;">
        <p ng-show="firstSchemaMessage" class="clearfix">Get started building your search app by defining a new schema. A schema defines all the fields in your search index. Solr comes with a <b>_default</b> schema that provides a good starting point to customize based on your specific data.<br/><br/></p>
        <form>
          <p class="clearfix"><label for="add_schema">New Schema:</label><input type="text" name="name" id="add_schema" ng-model="newSchema"></p>
          <div class="clearfix"><label for="copy_schema">Copy From:</label>
            <select id="copy_schema"
                    ng-model="copyFrom"
                    chosen
                    ng-options="schema for schema in publishedSchemas"><option value=""></option></select><a ng-click="showHelp('copyFromHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
            <div id="copyFromHelp" class="help" ng-show="helpId === 'copyFromHelp'" escape-pressed="hideAll()">
              <div class="help">
              <p>Copy an existing Configset (schema, solrconfig.xml, and supporting files) as the starting point for your new schema. The <b>_default</b> Configset includes a schema with field guessing enabled, dynamic fields for common field types, and field types for analyzing text data for a number of common languages supported by Lucene. For more information about Configsets, see: <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/config-sets.html">Configsets</a></div></p>
              </div>
            </div>
          </div>
          <p class="clearfix note error" ng-show="addMessage"><span>{{addMessage}}</span></p>
          <p class="clearfix buttons">
            <button type="submit" class="submit" ng-click="addSchema()"><span>Add Schema</span></button>
            <button type="reset" class="reset" ng-click="cancelAddSchema()"><span>Cancel</span></button>
          </p>
        </form>
      </div>
    </div>
  </div>
  </div>

  <div class="clearfix">

    <div class="designer-left">
      <div class="block" id="sample-docs">
        <h2><span>Sample Documents</span></h2>
        <div class="content">
          <form id="sample-docs-form">
            <div id="document-container">
              <div id="file-upload">
                <input type="file" id="upload-file" name="upload-file" file-model="fileUpload"/><a ng-click="showHelp('sampleDocsHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                <div id="sampleDocsHelp" class="help" ng-show="helpId === 'sampleDocsHelp'">
                  <div class="help">
                    <p>Upload a JSON, CSS, or XML file containing sample documents or simply paste some sample documents into the text area below; the Schema Designer supports a maximum of 5MB and 1,000 documents.
                      <br/><br/>Click on the <b>Analyze Documents</b> button to have Solr determine the schema by looking at the sample values for each field. Sample documents are stored on the server so you can make changes to the schema and Schema Designer will automatically re-index the sample documents to apply the changes.
                    </p>
                  </div>
                </div>
              </div>
              <label for="document">or Paste Sample Document(s):</label>
              <textarea ng-model="sampleDocuments" name="document" id="document" title="Sample Documents" rows="20" cols="44" placeholder="" ng-change="onSampleDocumentsChanged()"></textarea>
            </div>
            <div id="analyze-buttons">
              <p class="clearfix note" ng-show="sampleMessage && !fileUpload && !sampleDocuments"><span>{{sampleMessage}}</span></p>
              <button type="submit" ng-click="doAnalyze()" id="analyze" ng-show="currentSchema && (hasDocsOnServer || sampleDocuments || fileUpload)"><span>Analyze Documents</span></button>
            </div>
          </form>
        </div>
      </div>

    </div>

    <div class="designer-middle">
      <div class="block" id="schema-editor">
        <h2><span>Schema Editor</span></h2>
        <div id="tree-filters" ng-show="showSchemaActions">
          Filter fields by:&nbsp;<select id="tree-filters-cat"
            ng-model="treeFilter"
            ng-change="applyTreeFilterOption()">
          <option value=""></option>
          <option value="type">type</option>
          <option value="feature">feature</option>
          </select>
          <select id="tree-filters-options"
              type="text"
              ng-model="treeFilterOption"
              ng-change="onTreeFilterOptionChanged()"
              ng-options="option for option in treeFilterOptions"></select>
          <span id="treeFilterFeatureEnabledSpan" ng-show="treeFilter === 'feature'">
          <input id="treeFilterFeatureEnabledInput" type="checkbox" ng-model="treeFilterFeatureEnabled" ng-change="onTreeFilterOptionChanged()" ng-true-value="'true'" ng-false-value="'false'"/>
          <label class="checkbox" for="treeFilterFeatureEnabledInput" title="enabled">enabled</label>
          </span>
        </div>
        <div id="tree-content" class="content clearfix" ng-show="showSchemaActions">
          <jstree class="tree" on-select="onSelectSchemaTreeNode(url)" id="schemaJsTree" data="schemaTree"></jstree>
        </div>
        <div id="tree-node-content" ng-show="showFieldDetails">
          <div id="field-top-right">
            <button id="updateSelected" class="action" ng-click="updateSelected()" ng-show="selectedUpdated"><span>Update {{ selectedType }}</span></button>
            <!-- <button id="deleteSelected" class="action" ng-click="deleteSelected()" ng-show="selectedNode"><span>Delete {{ selectedType }}</span></button> -->
          </div>

          <div id="schema-root-details" ng-show="isSchemaRoot">
            <div class="field-form-right">
              <label class="checkbox" title="Schema">Schema:</label>
              <p id="currentSchemaLabel">{{currentSchema}}</p>
            </div>
            <div class="field-form-right">
              <label for="unique_key" class="checkbox" title="Unique Key Field">Unique Key Field:</label>
              <select id="unique_key"
                      placeholder-text-single="'Unique Key Field'"
                      ng-model="updateUniqueKeyField"
                      chosen disable-search="true"
                      disabled
                      ng-change="updateUniqueKey()"
                      ng-options="field for field in possibleIdFields"><option value=""></option></select>
            </div>
            <div class="field-form-right">
              <label for="languages">Language(s):</label>
              <select ng-model="languages" id="languages" ng-change="changeLanguages()" placeholder="Languages" size="12" multiple>
                <option value="*">-- All --</option>
                <option value="ar">Arabic</option>
                <option value="hy">Armenian</option>
                <option value="eu">Basque</option>
                <option value="bg">Bulgarian</option>
                <option value="ca">Catalan</option>
                <option value="cjk">CJK bigram</option>
                <option value="cz">Czech</option>
                <option value="da">Danish</option>
                <option value="nl">Dutch</option>
                <option value="en">English</option>
                <option value="et">Estonian</option>
                <option value="fa">Farsi</option>
                <option value="fi">Finnish</option>
                <option value="fr">French</option>
                <option value="gl">Galician</option>
                <option value="de">German</option>
                <option value="el">Greek</option>
                <option value="hi">Hindi</option>
                <option value="hu">Hungarian</option>
                <option value="id">Indonesian</option>
                <option value="ga">Irish</option>
                <option value="it">Italian</option>
                <option value="ja">Japanese</option>
                <option value="ko">Korean</option>
                <option value="lv">Latvian</option>
                <option value="no">Norwegian</option>
                <option value="pt">Portuguese</option>
                <option value="ro">Romanian</option>
                <option value="ru">Russian</option>
                <option value="es">Spanish</option>
                <option value="sv">Swedish</option>
                <option value="th">Thai</option>
                <option value="tr">Turkish</option>
              </select><a ng-click="showHelp('languagesHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
              <div id="languagesHelp" class="help" ng-show="helpId === 'languagesHelp'" escape-pressed="hideAll()">
                <div class="help">
                  <p>By default, schemas copied from the <i>_default</i> schema include field types (and associated files) for all built-in languages. Select the languages needed for your application and the designer will remove all the unnecessary field types for languages you don't need. For more information about text analysis and languages, see:
                  <div class="help-anchor">
                    <a target="_blank" href="https://solr.apache.org/guide/language-analysis.html#language-specific-factories">Language-Specific Factories</a>
                  </div>
                  </p>
                </div>
              </div>
            </div>
            <div class="field-form-checkbox">
              <input ng-change="rootChanged()" id="include_dynamic" type="checkbox" ng-model="enableDynamicFields" ng-true-value="'true'" ng-false-value="'false'">
              <label for="include_dynamic" class="checkbox" title="Include dynamic fields">Include dynamic fields?</label>
              <a ng-click="showHelp('dynamicFieldsHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
              <div id="dynamicFieldsHelp" class="help" ng-show="helpId === 'dynamicFieldsHelp'">
                <div class="help-wide">
                  <p>Dynamic fields allow Solr to index fields that you did not explicitly define in your schema. Dynamic fields can make your application less brittle by providing some flexibility in the documents you can add to Solr. It is recommended to keep the default set of dynamic fields enabled for your schema. Unchecking this option removes all dynamic fields from your schema. For more information about dynamic fields, see:
                  <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/dynamic-fields.html">Dynamic Fields</a></div>
                  </p>
                </div>
              </div>
            </div>
            <div class="field-form-checkbox">
              <input ng-change="rootChanged()" id="enable_guessing" type="checkbox" ng-model="enableFieldGuessing" ng-true-value="'true'" ng-false-value="'false'">
              <label for="enable_guessing" class="checkbox" title="Enable field guessing">Enable field guessing?</label>
              <a ng-click="showHelp('fieldGuessingHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
              <div id="fieldGuessingHelp" class="help" ng-show="helpId === 'fieldGuessingHelp'">
                <div class="help-wide">
                  <p>Field guessing (aka "schemaless mode") allows Solr to detect the "best" field type for unknown fields encountered during indexing. Field guessing also performs some field transformations, such as removing spaces from field names. If you use the schema designer to create your schema based on sample documents, you may not need to enable this feature.
                    However, with this feature disabled, you need to make sure the incoming data matches the schema exactly or indexing errors may occur. For more information about schemaless mode, see:
                  <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/schemaless-mode.html">Schemaless Mode</a></div>
                  </p>
                </div>
              </div>
            </div>
            <div class="field-form-checkbox">
              <input ng-change="rootChanged()" id="enable_nested" type="checkbox" ng-model="enableNestedDocs" ng-true-value="'true'" ng-false-value="'false'">
              <label for="enable_nested" class="checkbox" title="Enable field guessing">Enable nested child documents?</label>
              <a ng-click="showHelp('nestedDocsHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
              <div id="nestedDocsHelp" class="help" ng-show="helpId === 'nestedDocsHelp'">
                <div class="help-wide">
                  <p>Enabling this feature adds the <b>_root_</b> and <b>_nest_path_</b> fields to your schema.<br/><br/>For more information about indexing nested child documents, see:
                  <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/indexing-nested-documents.html">Indexing Nested Child Documents</a></div>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div id="file-node" ng-show="selectedFile">
            <textarea name="file-node-text" id="file-node-text" ng-model="fileNodeText" rows="24" cols="62"></textarea>
            <div id="save-file-buttons" class="clearfix">
              <button id="save-file" type="submit" class="submit" ng-click="updateFile()"><span>Save</span></button>
            </div>
            <p class="clearfix note error" ng-show="updateFileError"><span>{{updateFileError}}</span></p>
          </div>
          <div id="leaf-node" ng-show="isLeafNode">
            <form>
              <p class="clearfix note error" ng-show="updateSelectedError"><span>{{updateSelectedError}}</span></p>
              <div id="field-top">
                <div id="field-top-left">
                  <div class="field-top-form">{{selectedType}}: <b>{{selectedNode.name}}</b></div>
                  <div class="field-top-form" ng-show="selectedType === 'Field'">
                    <label for="field_type">Type:</label>
                    <select chosen
                            type="text"
                            id="field_type"
                            ng-model="selectedNode.type"
                            ng-change="onFieldTypeChanged(type)"
                            ng-options="type for type in types"><option value=""></option></select><a ng-click="showHelp('fieldTypeHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                    <div id="fieldTypeHelp" class="help" ng-show="helpId === 'fieldTypeHelp'">
                      <div class="help-wider">
                        <p>The field type defines how Solr should interpret data in a field and how the field can be queried. The properties on each field are inherited from the field type if not explicitly overridden in the field definition. In many cases, it's preferable to choose a different field type instead of overriding the field properties. For example, there's typically a multi-valued version of each type, such as <b>strings</b> is the multi-valued version of the <b>string</b> type. For more information about field types, see:
                        <div class="help-anchor">
                          <a target="_blank" href="https://solr.apache.org/guide/field-type-definitions-and-properties.html#field-type-definitions-and-properties">Field Type Definitions and Properties</a>
                        </div>
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="field-top-form" ng-show="selectedType === 'Field'">
                    <label for="field_default" title="Default Value">Default Value:</label>
                    <input id="field_default" type="text" ng-model="selectedNode.default" ng-click="markSelectedUpdated($event)">
                  </div>
                  <div class="field-top-form" ng-show="selectedType === 'Type'">
                    <label for="type_class" title="Class">Class</label>
                    <input id="type_class" type="text" ng-model="selectedNode.class" ng-click="markSelectedUpdated($event)" placeholder="Java Class">
                  </div>
                </div>
              </div>
              <div id="field-bottom">
                <div id="field-form-left">
                  <div class="field-form">
                    <input id="indexed" type="checkbox" ng-model="selectedNode.indexed" ng-click="markSelectedUpdated($event)" value="true">
                    <label for="indexed" class="checkbox" title="Indexed">Indexed</label>
                  </div>
                  <div class="field-form">
                    <input id="stored" type="checkbox" ng-model="selectedNode.stored" ng-click="markSelectedUpdated($event)" value="true">
                    <label for="stored" class="checkbox" title="Stored">Stored</label>
                  </div>
                  <div class="field-form">
                    <input id="multiValued" type="checkbox" ng-model="selectedNode.multiValued" ng-click="markSelectedUpdated($event)" value="true">
                    <label for="multiValued" class="checkbox" title="Multi-Valued">Multi-Valued</label>
                  </div>
                  <div class="field-form">
                    <input id="docValues" type="checkbox" ng-model="selectedNode.docValues" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('not-text')" value="true">
                    <label for="docValues" class="checkbox" title="Doc Values">Doc Values</label>
                  </div>
                  <div class="field-form">
                    <input id="useDocValuesAsStored" type="checkbox" ng-model="selectedNode.useDocValuesAsStored" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('docValues')" value="true">
                    <label for="useDocValuesAsStored" class="checkbox" title="Use Doc Values as Stored">Use Doc Values as Stored</label>
                  </div>
                  <div class="field-form" ng-show="selectedType == 'Field'">
                    <input id="required" type="checkbox" ng-model="selectedNode.required" ng-click="markSelectedUpdated($event)" value="true">
                    <label for="required" class="checkbox" title="Required">Required</label>
                  </div>
                  <div class="field-form">
                    <input id="tokenized" type="checkbox" ng-model="selectedNode.tokenized" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')" value="true">
                    <label for="tokenized" class="checkbox" title="Tokenized">Tokenized</label>
                  </div>
                  <div class="field-form">
                    <input id="sortMissingLast" type="checkbox" ng-model="selectedNode.sortMissingLast" ng-click="markSelectedUpdated($event)" value="true">
                    <label for="sortMissingLast" class="checkbox" title="Sort Missing Last">Sort Missing Last</label>
                  </div>
                  <div class="field-form">
                    <input id="uninvertible" type="checkbox" ng-model="selectedNode.uninvertible" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')" value="true">
                    <label for="uninvertible" class="checkbox" title="Uninvertible">Uninvertible</label>
                  </div>
                </div>
                <div id="field-form-right">
                  <div class="field-form">
                    <input id="termVectors" type="checkbox" ng-model="selectedNode.termVectors" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')" value="true">
                    <label for="termVectors" class="checkbox" title="Term Vectors">Term Vectors</label>
                  </div>
                  <div class="field-form">
                    <input id="termPositions" type="checkbox" ng-model="selectedNode.termPositions" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('termVectors')" value="true">
                    <label for="termPositions" class="checkbox" title="Term Positions">Term Positions</label>
                  </div>
                  <div class="field-form">
                    <input id="termOffsets" type="checkbox" ng-model="selectedNode.termOffsets" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('termVectors')" value="true">
                    <label for="termOffsets" class="checkbox" title="Term Offsets">Term Offsets</label>
                  </div>
                  <div class="field-form">
                    <input id="termPayloads" type="checkbox" ng-model="selectedNode.termPayloads" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('termVectors')" value="true">
                    <label for="termPayloads" class="checkbox" title="Term Payloads">Term Payloads</label>
                  </div>
                  <div class="field-form">
                    <input id="omitNorms" type="checkbox" ng-model="selectedNode.omitNorms" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')" value="true">
                    <label for="omitNorms" class="checkbox" title="Omit Norms">Omit Norms</label>
                  </div>
                  <div class="field-form">
                    <input id="omitPositions" type="checkbox" ng-model="selectedNode.omitPositions" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')" value="true">
                    <label for="omitPositions" class="checkbox" title="Omit Positions">Omit Positions</label>
                  </div>
                  <div class="field-form">
                    <input id="omitTermFreqAndPositions" type="checkbox" ng-model="selectedNode.omitTermFreqAndPositions" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')"
                           value="true">
                    <label for="omitTermFreqAndPositions" class="checkbox" title="Omit Term Frequencies & Positions">Omit Term Frequencies & Positions</label>
                  </div>
                  <div class="field-form">
                    <input id="storeOffsetsWithPositions" type="checkbox" ng-model="selectedNode.storeOffsetsWithPositions" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('indexed')"
                           value="true">
                    <label for="storeOffsetsWithPositions" class="checkbox" title="Store Offsets with Positions">Store Offsets with Positions</label>
                  </div>
                  <div class="field-form">
                    <input id="large" type="checkbox" ng-model="selectedNode.large" ng-click="markSelectedUpdated($event)" ng-disabled="isDisabled('stored')" value="true">
                    <label for="large" class="checkbox" title="Large">Large</label>
                  </div>
                </div>
                <div id="field-copy" ng-show="selectedType === 'Field'">
                  <div class="field-form">
                    <label for="copy_dest" class="checkbox" title="Copy to">Copy to:</label>
                    <input type="text" id="copy_dest" ng-model="selectedNode.copyDest" ng-change="markSelectedUpdated($event)" placeholder="specify your destination field(s) (comma-delimited)">
                    <a ng-click="showHelp('copyToHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                    <div id="copyToHelp" class="help" ng-show="helpId === 'copyToHelp'">
                      <div class="help-top">
                        <p>Copy fields allow you to apply several distinct field types to a single piece of incoming information during indexing. For instance, a common approach is to copy important string fields into the catch-all '_text_' field to enable full-text matches on terms contained in string fields. Provide a comma-delimited list of fields to copy into during indexing. For more information about copy fields, see:
                        <div class="help-anchor">
                          <a target="_blank" href="https://solr.apache.org/guide/8_8/copying-fields.html">Copy Fields</a>
                        </div>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="field-analysis" ng-show="analysis.data.tokenized">
                  <div id="edit-analysis-json-link" ng-show="!selectedNode.type"><a ng-click="toggleShowAnalysisJson()" class="toggle">{{editAnalysis}}</a></div>
                  <div id="show-analysis-json" ng-show="showAnalysisJson">
                    <textarea id="analysis-json" ng-change="markSelectedUpdated($event)" ng-model="analysisJsonText" rows="6" cols="60"></textarea>
                  </div>
                  <div id="hide-analysis-json" ng-show="!showAnalysisJson">
                    <ul class="analyzer">
                    <li class="clearfix {{analyzer.key}}" ng-class="{open: analyzer.show}" ng-repeat="analyzer in analysis.analyzers">
                      <p><span>{{analyzer.name}}&nbsp;Analyzer:</span></p>
                      <dl>
                        <dt><a ng-click="toggleAnalyzer(analyzer)" class="toggle">{{analyzer.detail.className}}</a></dt>
                      </dl>
                      <ul ng-show="analyzer.show">
                        <li class="clearfix {{componentType.key}} data" ng-repeat="componentType in analyzer.detail.componentTypes" ng-show="componentType.components">
                          <p>{{componentType.label}}:</p>
                          <dl>
                            <dt ng-repeat-start="component in componentType.components">{{component.className}}</dt>
                            <dd ng-repeat-end ng-repeat="arg in component.args" ng-class="{'ico-1': arg.booleanValue, 'ico-0': arg.booleanValue==false}">
                              {{arg.name}}<span ng-show="arg.value && arg.name != 'words' && arg.name != 'protected'">: {{arg.value}}</span><span ng-show="arg.value && (arg.name === 'words' || arg.name === 'protected')">: <a class="file-link" ng-click="loadFile($event)">{{arg.value}}</a></span>
                            </dd>
                          </dl>
                        </li>
                      </ul>
                    </li>
                  </ul>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="container-node" ng-show="containerNode === 'fields' || containerNode === 'dynamicFields'">
            <table border="0" cellspacing="0" cellpadding="0">
              <tbody>
              <tr ng-class="{odd:$odd}">
                <th class="prop-hdr">Name <a ng-click="showHelp('fieldTableHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                  <div id="fieldTableHelp" class="help" ng-show="helpId === 'fieldTableHelp'">
                    <div class="help">
                      <p>This table provides a list of {{containerNodeLabel}} defined for your schema. Click on the name in the first column to edit properties. Click on <b>{{containerNodeLabel}}</b> in the Schema Editor tree on the left to return to this table view.<br/><br/>For more information about field properties, see: <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/defining-fields.html">Field Properties</a></div></p>
                    </div>
                  </div>
                </th>
                <th class="prop-hdr">Type</th>
                <th class="prop-hdr-flag">Indexed</th>
                <th class="prop-hdr-flag">Stored</th>
                <th class="prop-hdr-flag">MultiValued</th>
                <th class="prop-hdr-flag">DocValues</th>
                <th class="prop-hdr-flag">Tokenized</th>
              </tr>
              <tr ng-repeat="f in containerNodes" ng-class="{odd:$odd}">
                <td class="prop"><a ng-click="selectField($event)">{{f.name}}</a></td>
                <td class="prop">{{f.type}}</td>
                <td class="prop-flag"><span ng-show="f.indexed"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.stored"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.multiValued"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.docValues"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.tokenized"><img src="img/ico/tick.png"/></span></td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="container-node" ng-show="containerNode === 'fieldTypes'">
            <table border="0" cellspacing="0" cellpadding="0">
              <tbody>
              <tr ng-class="{odd:$odd}">
                <th class="prop-hdr">Type <a ng-click="showHelp('fieldTypeTableHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                  <div id="fieldTypeTableHelp" class="help" ng-show="helpId === 'fieldTypeTableHelp'">
                    <div class="help">
                      <p>This table provides a list of field types defined for your schema. Click on the type name in the first column to edit properties for that type. Changing properties for a type impacts all fields linked to the type. Click on <b>Field Types</b> in the Schema Editor tree on the left to return to this table view.<br/><br/>For more information about field types, see: <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/field-type-definitions-and-properties.html">Field Type Definitions and Properties</a></div></p>
                    </div>
                  </div></th>
                <th class="prop-hdr">Class</th>
                <th class="prop-hdr-flag">Indexed</th>
                <th class="prop-hdr-flag">Stored</th>
                <th class="prop-hdr-flag">MultiValued</th>
                <th class="prop-hdr-flag">DocValues</th>
                <th class="prop-hdr-flag">Tokenized</th>
              </tr>
              <tr ng-repeat="f in containerNodes" ng-class="{odd:$odd}">
                <td class="prop"><a ng-click="selectFieldType($event)">{{f.name}}</a></td>
                <td class="prop">{{f.class}}</td>
                <td class="prop-flag"><span ng-show="f.indexed"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.stored"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.multiValued"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.docValues"><img src="img/ico/tick.png"/></span></td>
                <td class="prop-flag"><span ng-show="f.tokenized"><img src="img/ico/tick.png"/></span></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="designer-right">
      <div class="block" id="analysis">
        <h2><span>Text Analysis</span></h2>
        <div class="block analysis-error" id="analysis-handler-missing" ng-show="isHandlerMissing">
          <div class="head">This Functionality requires the <code>/analysis/field</code> Handler to be registered and active!</div>
        </div>
        <div class="block analysis-error" id="analysis-error" ng-show="analysisError">
          <div class="body">{{analysisError}}</div>
        </div>
        <div id="field-analysis-holder" ng-show="showAnalysis">
          <div class="field-form">
            <label for="analysis_select_doc_id">Sample Doc ID</label>
            <select id="analysis_select_doc_id"
                    placeholder-text-single="'ID'"
                    ng-model="sampleDocId"
                    chosen
                    ng-change="updateSampleDocId()"
                    ng-options="id for id in sampleDocIds"><option value=""></option></select>
          </div>
          <div class="field-form">
            <label for="analysis_fieldvalue_index">{{selectedNode.name}}</label>
            <textarea name="analysis.fieldvalue" id="analysis_fieldvalue_index" ng-model="indexText" rows="2" cols="40"></textarea>
          </div>
          <div class="verbose_output" ng-class="{active:analysisVerbose}">
            <a ng-click="toggleVerbose()">Detailed Output</a>
          </div>
          <div id="analysis-result" class="clearfix">
            <div ng-class="key" ng-repeat="(key, type) in result">
              <table border="0" cellspacing="0" cellpadding="0">
                <tbody ng-repeat="component in type">
                <tr class="step">
                  <td class="part analyzer">
                    <div>
                      <abbr title="{{component.name}}">{{component.short}}</abbr>
                    </div>
                  </td>

                  <td class="part legend" ng-show="analysisVerbose">
                    <div class="holder">
                      <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td>
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr ng-repeat="caption in component.captions" class="{{generate_class_name( short_key )}}"><td>{{ caption }}</td></tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </td>
                  <td class="part data" ng-class="{spacer:token.blank}" colspan="1" ng-repeat="token in component.tokens track by token.index">
                    <div class="holder" ng-hide="token.blank">
                      <table border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr class="details">
                          <td class="details">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tbody>
                              <tr class="{{value.name}} {{value.extraclass}}" ng-repeat="value in token.keys" ng-show="analysisVerbose || value.name=='text'">
                                <td>{{value.value}}</td>
                              </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="holder" ng-show="token.blank">&nbsp;</div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="clearfix">
    <div class="query-tester-left">
      <div class="block" id="query-tester">
        <h2><span>Query Tester</span></h2>
        <div class="content">
          <div id="query-form" ng-show="showSchemaActions">
              <div class="field-form-right">
                <label for="q" title="The query string.">Query</label>
                <textarea name="q" ng-model="query.q" id="q" rows="1" cols="30" title="The query string.">*:*</textarea>
                <a ng-click="showHelp('qHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                <div id="qHelp" class="help" ng-show="helpId === 'qHelp'">
                  <div class="help">
                    <p>Main query parameter <b>q</b> specifies the ranked matching criteria for documents. If you don't specify a field name in the query, the default text field, typically <b>_text_</b>, is used.
                      If the query results do not contain expected documents, check how the default text field is populated, typically using copy field directives in the schema.
                      <br/><br/>For more information about query parameters, see:
                    <div class="help-anchor">
                      <a target="_blank" href="https://solr.apache.org/guide/query-syntax-and-parsing.html">Query Syntax and Parsing</a>
                    </div>
                    </p>
                  </div>
                </div>
              </div>
              <div class="field-form-right">
                <label for="sort" title="Sort field">Sort by</label>
                <select chosen placeholder-text-single="'Select Field'" id="sort" ng-model="query.sortBy" ng-options="field for field in sortableFields"><option value=""></option></select> asc <input type="radio" ng-model="query.sortDir" value="asc"/> desc <input type="radio" ng-model="query.sortDir" value="desc"/>
                <a ng-click="showHelp('querySortHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                <div id="querySortHelp" class="help" ng-show="helpId === 'querySortHelp'">
                  <div class="help">
                    <p>Sort fields must be single-valued and indexed (or have docValues enabled). If an expected field is not present in this list, check the active properties in the schema.
                      <br/><br/>For more information about query parameters, see:
                    <div class="help-anchor">
                      <a target="_blank" href="https://solr.apache.org/guide/query-syntax-and-parsing.html">Query Syntax and Parsing</a>
                    </div>
                    </p>
                  </div>
                </div>
              </div>
              <div class="field-form-right">
                <label for="ff" title="Facet field">Facet fields</label>
                <select multiple ng-model="selectedFacets" id="ff" size="7" ng-options="ff for ff in facetFields"></select>
                <a ng-click="showHelp('queryFacetHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
                <div id="queryFacetHelp" class="help" ng-show="helpId === 'queryFacetHelp'">
                  <div class="help">
                    Fields must be indexed or have docValues enabled to compute facets.<br/><br/>For more information about faceting, see:
                    <div class="help-anchor"><a target="_blank" href="https://solr.apache.org/guide/faceting.html">Faceting</a></div>
                  </div>
                </div>
              </div>
              <div class="field-form-right">
                <label for="hl" title="Highlight">Highlighting</label>
                <select chosen placeholder-text-single="'Select Field'" id="hl" ng-model="query.highlight" ng-options="field for field in hlFields"><option value=""></option></select>
              </div>
              <div class="field-form-right">
                <label for="rawParams" title="Additional params">Additional params</label>
                <textarea name="q" ng-model="rawParams" id="rawParams" rows="1" cols="30" title="Additional URL params"></textarea>
              </div>
              <div id="query-buttons">
                <button type="submit" ng-click="doQuery()" id="queryButton"><span>Run Query</span></button>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="query-tester-right">
      <div class="block" id="query-results">
        <h2><span>Query Results</span></h2>
        <div class="content" ng-show="queryResultsTree">
          <div id="results-tree-left">
          <jstree class="tree" on-select="onSelectQueryResultsNode(url)" id="queryResultsJsTree" data="queryResultsTree"></jstree>
          </div>
          <div id="results-tree-right">
            <div id="editDocumentsToolbar" ng-show="(selectedResultsNode === '/' || selectedResultsNode === 'docs') && queryDocs">
            <button id="editDocuments" class="action" ng-click="editDocuments()"><span>Edit Documents</span></button><a ng-click="showHelp('editDocsHelp')"><img class="help-ico" src="img/ico/question-white.png"/></a>
              <div id="editDocsHelp" class="help" ng-show="helpId === 'editDocsHelp'">
                <div class="help-small">Copy the documents from the query results to the Sample Documents text area as JSON. This allows you to refine your schema by changing the sample data sourced from the query results.</div>
              </div>
            </div>
            <div id="selected-hit" ng-show="resultsData">
              <table border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr ng-repeat="row in resultsData" ng-class="{odd:$odd}">
                  <td class="hit-field"><span ng-show="!row.type">{{row.name}}</span><span ng-show="row.type === 'f'"><a ng-click="selectField($event)">{{row.name}}</a></span></td>
                  <td class="hit-value" width="500">{{row.value}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

</div>
