<div style='height:100%;margin: 5px; overflow:auto;' class='panel panel-default' id='{{divElementId}}-mainPanel'>
  <div class='panel-heading' id='{{divElementId}}-panelHeading'>
    <div class='row'>
      <div class='col-md-6' id='{{divElementId}}-panelTitle'></div>
      <div class='col-md-6 text-right'>
        <!--<a class="btn btn-link" href="help/topics/creating-queries.html" target="_blank" title="Help" role="button"><i class='glyphicon glyphicon-question-sign'></i></a>-->
        <!-- To maintain size of Settings pane ; uniformity in Concept Details and ECL tab -->
        <button id='{{divElementId}}-configButton' class='btn btn-link' style='padding:2px;visibility:hidden;'><i class='glyphicon glyphicon-cog'></i></button>
      </div>
    </div>
  </div>
  <div class='panel-body' style='height:100%' id='{{divElementId}}-panelBody'>
    <div class="row container-fluid" style="margin-left: 10px; margin-right: 10px; margin-top: 0px; padding-left: 0px;">
      <div class="col-md-6" style="padding-left: 0">
        <div class="lead i18n" style="padding-left: 5px; padding-top: 15px; margin-bottom: 0px; display:inline-block; vertical-align: top" data-i18n-id="i18n__enter_an_expression">{{i18n "i18n__enter_an_expression" "Enter an ECL query"}}</div>
      </div>
      <button type="button" id="{{divElementId}}-helpButton" class="btn btn-default pull-right i18n" style="margin: 10px;" data-toggle="modal" data-target="#{{divElementId}}-queryHelpModal" data-i18n-id="i18n_Help">{{i18n "i18n_Help" "Help"}}</button>
      <button type="button" id="{{divElementId}}-clearButton" class="btn btn-default pull-right i18n" style="margin: 10px;" data-i18n-id="i18n_clear">{{i18n "i18n_clear" "Clear"}}</button>
    </div>
    <div>
      <div class="tab-content">
        <div class="tab-pane active" id="{{divElementId}}-ExpTab" style="padding-left: 15px;padding-right: 15px;padding-bottom: 15px;margin: 0;">
          <textarea rows="5" ondrop="dropE(event);" class="form-control i18n" placeholder="{{i18n "i18n_expression_constraint" "Expression constraint"}}..." id="{{divElementId}}-ExpText"></textarea>
            <div class="btn btn-success i18n" style="margin-top: 5px; margin-bottom: 10px; margin-right: 10px; position: initial" id='{{divElementId}}-computeInferredButton2' data-i18n-id="i18n_execute">{{i18n "i18n_execute" "Execute"}}</div>
          <br>
          <div class="btn-group" style="width: 50%;">
            <input data-droppable="true" ondrop="dropS(event);" ondragover="removeHighlight();" style="width: 100%; margin-top: 3px" ondragstart="allowDrop(event);" class="form-control" id="{{divElementId}}-searchBoxOption" placeholder="{{i18n "i18n_ecl_search_option_placeholder" "Enter additional search filter (optional)"}}" autocomplete="off">
            <span id="{{divElementId}}-clearSearchButton" class="searchclear glyphicon glyphicon-remove-circle"></span>
          </div>
          <br>
          <br>
        </form>
        <div class="row container-fluid" style="margin: 10px;">
          <p class="lead"><span class="i18n" data-i18n-id="i18n_results">{{i18n "i18n_results" "Results"}}</span>: <span id="{{divElementId}}-resultInfo"></p></span>
        </div>

        <div class="row container-fluid" id="{{divElementId}}-output" style="margin: 10px;">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th><span class="i18n" data-i18n-id="i18n_concept">{{i18n "i18n_concept" "Concept"}}</span></th>
                <th><span class="i18n" data-i18n-id="i18n_preferred_term">{{i18n "i18n_preferred_term" "Preferred Term"}}</span></th>
                <th><span class="i18n" data-i18n-id="i18n_id">{{i18n "i18n_id" "Id"}}</span></th>
              </tr>
            </thead>
            <tbody id="{{divElementId}}-outputBody"></tbody>
            <tfoot>
              <tr>
                <td colspan="3" id="{{divElementId}}-footer" class="text-center text-muted small"></td>
              </tr>
            </tfoot>
          </table>
          <table id="{{divElementId}}-output2" style="display: none">
            <thead>
              <tr>
                <th><span class="i18n" data-i18n-id="i18n_concept">{{i18n "i18n_concept" "Concept"}}</span></th>
                <th><span class="i18n" data-i18n-id="i18n_preferred_term">{{i18n "i18n_preferred_term" "Preferred Term"}}</span></th>
                <th><span class="i18n" data-i18n-id="i18n_id">{{i18n "i18n_id" "Id"}}</span></th>
              </tr>
            </thead>
            <tbody id="{{divElementId}}-outputBody2">
            </tbody>
          </table>

        </div>
      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
  <!-- Modals -->
  <div class="modal fade" id="{{divElementId}}-queryHelpModal" tabindex="-1" role="dialog" aria-labelledby="{{divElementId}}-myCloudModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title i18n" data-i18n-id="i18n_Help">{{i18n "i18n_Help" "Help"}}</h4>
        </div>
        <div class="modal-body" style="max-height: 450px; overflow: auto;">
          <h2 class="i18n" data-i18n-id="i18n_snomed_ecl_title">{{i18n "i18n_snomed_ecl_title" "SNOMED CT Expression Constraint Language"}}</h2>
          <p> <span class="i18n" data-i18n-id="i18n_snomed_ecl_description">{{i18n "i18n_snomed_ecl_description" 'This tool implements a subset of ECL functions from the "SNOMED CT Expression Constraint Language Specification and Guide"'}}</span> (<a href="http://snomed.org/ecl" target="_blank">http://snomed.org/ecl</a>). <span class="i18n" data-i18n-id="i18n_snomed_ecl_description1">{{i18n "i18n_snomed_ecl_description1" 'For a quick reference to the key syntax features, please refer to the'}}</span> <a href="https://confluence.ihtsdotools.org/display/DOCECL/Appendix+D+-+ECL+Quick+Reference" target="_blank"><span class="i18n" data-i18n-id="i18n_snomed_ecl_description2">{{i18n "i18n_snomed_ecl_description2" 'ECL Quick Reference'}}</span></a></p>
          <p class="lead"><span class="i18n" data-i18n-id="i18n_for_example">{{i18n "i18n_for_example" "For example"}}</span>:</p>
          <table class="c0">
            <tbody>
              <tr class="c15">
                <td class="c18 c24" colspan="2" rowspan="1">
                  <p class="c3"><span class="c2 i18n" data-i18n-id="i18n_ecl_operation">{{i18n "i18n_ecl_operation" "ECL Operator"}}</span></p>
                </td>
                <td class="c13 c18" colspan="1" rowspan="2">
                  <p class="c3"><span class="c2 i18n" data-i18n-id="i18n_summary">{{i18n "i18n_summary" "Summary"}}</span></p>
                </td>
                <td class="c6 c18" colspan="1" rowspan="2">
                  <p class="c3"><span class="c2 i18n" data-i18n-id="i18n_example">{{i18n "i18n_example" "Example"}}</span></p>
                </td>
              </tr>
              <tr class="c15">
                <td class="c7" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2 i18n" data-i18n-id="i18n_symbol">{{i18n "i18n_symbol" "Symbol"}}</span></p>
                </td>
                <td class="c10" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2 i18n" data-i18n-id="i18n_name">{{i18n "i18n_name" "Name"}}</span></p>
                </td>
              </tr>
              <tr class="c16">
                <td class="c8 w-10" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&lt; </span></p>
                </td>
                <td class="c11 w-10" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name1">Descendant of</span></p>
                </td>
                <td class="c13 w-20" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary1">The set of all subtypes of the given concept</span></p>
                </td>
                <td class="c6 w-20" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt; 404684003 |Clinical finding|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&lt;&lt; </span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name2">Descendant or self of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary2">The set of all subtypes of the given concept plus the concept itself</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c23">&lt;&lt; </span><span class="c20">73211009 |Diabetes mellitus|</span></p>
                </td>
              </tr>
              <tr class="c16">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&gt; </span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name3">Ancestor of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary3">The set of all supertypes of the given concept</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&gt; 40541001 |Acute pulmonary edema|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&gt;&gt; </span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name4">Ancestor or self of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary4">The set of all supertypes of the given concept plus the concept itself</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&gt;&gt; 40541001 |Acute pulmonary edema|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&lt;!</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name5">Child of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary5">The set of all children of the given concept</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt;! 195967001 |Asthma|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&lt;&lt;!</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name5">Child or self of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary5">The set of all children of the given concept plus the concept itself</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt;&lt;! 195967001 |Asthma|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&gt;!</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name5">Parent of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary5">The set of all parents of the given concept</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&gt;! 95347000 |Skin necrosis|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">&gt;&gt;!</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name5">Parent or self of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary5">The set of all parents of the given concept plus the concept itself</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&gt;&gt;! 95347000 |Skin necrosis|</span></p>
                </td>
              </tr>
              <tr class="c1">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">^</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name6">Member of</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary6">The set of referenced components in the given reference set</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">^ 683861000189108 |India patient instructions refset|</span></p>
                </td>
              </tr>
              <tr class="c16">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">*</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name7">Any</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary7">Any concept in the given SNOMED CT edition</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5">*</span></p>
                </td>
              </tr>
              <tr class="c21">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">:</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name8">Refinement</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary8">Only those concepts whose defining relationships match the given attribute value pairs</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt; 404684003 |clinical finding|: 116676008 |associated morphology| = *</span></p>
                </td>
              </tr>
              <tr class="c19">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">AND</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name9">Conjunction</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary9">Only those concepts in both sets</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt; 19829001 |disorder of lung| AND &lt; 301867009 |edema of trunk|</span></p>
                </td>
              </tr>
              <tr class="c19">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">OR</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name10">Disjunction</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary10">Any concept that belongs to either set</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt; 19829001 |disorder of lung| OR &lt; 301867009 |edema of trunk|</span></p>
                </td>
              </tr>
              <tr class="c19">
                <td class="c8" colspan="1" rowspan="1">
                  <p class="c3"><span class="c2">MINUS</span></p>
                </td>
                <td class="c11" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_name11">Exclusion</span></p>
                </td>
                <td class="c13" colspan="1" rowspan="1">
                  <p class="c3"><span class="c5 i18n" data-i18n-id="i18n_ecl_summary11">Concepts in the first set that do not belong to the second set</span></p>
                </td>
                <td class="c6" colspan="1" rowspan="1">
                  <p class="c3"><span class="c20">&lt; 19829001 |disorder of lung| MINUS &lt; 301867009 |edema of trunk|</span></p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>


        <div class="modal-footer">
          <button type="button" class="btn btn-default i18n" data-dismiss="modal" data-i18n-id="i18n_close">{{i18n "i18n_close" "Close"}}</button>
        </div>
      </div>
    </div>
  </div>

</div>
