<div style='margin: 5px; height:98%; overflow-x:hidden;' class='panel panel-default'>
    <div class='panel-heading' id='{{divElementId}}-panelHeading' ondrop="dropC(event, '{{divElementId}}')" ondragleave="removeHighlight();" ondragover="allowDrop(event)">
        <button id='{{divElementId}}-ownMarker' class='btn btn-link btn-lg' style='padding: 2px; position: absolute;top: 1px;left: 0px;'><i class='glyphicon glyphicon-book'></i></button>
        <button id='{{divElementId}}-subscribersMarker' class='btn btn-link btn-lg' style='padding:2px;position: absolute;top: 1px;'><i class='glyphicon glyphicon-bookmark'></i></button>
        <div class='row'>
            <div class='col-md-8' id='{{divElementId}}-panelTitle'>&nbsp&nbsp&nbsp<strong><span class='i18n' data-i18n-id='i18n_concept_details'>Concept Details</span></strong></div>
            <div class='col-md-4 text-right' id='{{divElementId}}-panelTitle'>
              	   <button id='{{divElementId}}-configButton' class="btn btn-link" data-toggle="modal" style="padding:2px" data-target='#{{divElementId}}-configModal' data-original-title="" title=""><i class="glyphicon glyphicon-cog"></i></button>
	          </div> 
        </div>
	 
    </div>
    <div class='panel-body' id='{{divElementId}}-panelBody'>
        
        <ul class="nav nav-tabs" id="details-tabs-{{divElementId}}">
            <li class="active"><a href="#home-{{divElementId}}" data-toggle="tab" style="padding-top: 3px; padding-bottom:3px;"><span class="i18n" data-i18n-id="i18n_summary">Summary</span></a></li>
            <li><a href="#details-{{divElementId}}" data-toggle="tab" style="padding-top: 3px; padding-bottom:3px;"><span class="i18n" data-i18n-id="i18n_details">Details</span></a></li>
            <li id="diagram-tab"><a href="#diagram-{{divElementId}}" data-toggle="tab" style="padding-top: 3px; padding-bottom:3px;" id="diagram-tab-link-{{divElementId}}"><span class="i18n" data-i18n-id="i18n_diagram">Diagram</span></a></li>
   
        </ul>
        <!-- Tab panes -->
        <div class="tab-content" id="details-tab-content-{{divElementId}}">
            <div class="tab-pane fade in active" id="home-{{divElementId}}" style="padding: 5px;">
              
                <div style="max-height: 300px; overflow: auto; margin-left: 0%; margin-bottom: 10px; margin-top: 10px; width: 80%;border: 2px solid #357ebd; border-radius: 4px; padding: 5px;">
                    <div class="panel-heading">
                        <h4><span data-i18n-id="i18n_parents" class="i18n">Parents</span></h4>
                    </div>
                    <div class="panel-body" id="home-parents-{{divElementId}}">
                        <span data-i18n-id="i18n_no_parents" class="i18n">No parents</span>
                    </div>
                </div>
                <div class="row" style="overflow: auto; max-height: 30%;">
				
                    <div class="col-md-offset-1 col-md-8" style="color: #ffffff;background-color: #1e90ff;display: inline-block; border: 2px solid #357ebd; border-radius: 4px; padding: 5px;" id="home-attributes-{{divElementId}}">Attributes</div>                 
                </div>
                <div style="max-height: 300px; overflow: auto; margin-left: 0%; margin-bottom: 10px; margin-top: 10px; width: 80%;border: 2px solid #357ebd; border-radius: 4px; padding: 5px;" id="home-children-{{divElementId}}">
                    <div class="panel-heading">
                        <h4><span data-i18n-id="i18n_children" class="i18n">Children</span>&nbsp;<span id="home-children-cant-{{divElementId}}"></span></h4>
                    </div>
                   <div id="spandiv"><div class="panel-body" id="home-children-{{divElementId}}-body"></div></div>
                </div>
                <div><span class="text-muted pull-right" id="footer-{{divElementId}}"></span></div>
            </div>
            <div class="tab-pane fade" id="details-{{divElementId}}">
                <div id='{{divElementId}}-attributes-panel' class='panel panel-default'>
                </div>
                <div id='{{divElementId}}-descriptions-panel' class='panel panel-default'>
                </div>
                <div id='{{divElementId}}-rels-panel' class='panel panel-default'>
                </div>
                
            </div>
            <div class="tab-pane fade" id="diagram-{{divElementId}}">
                <div class="row" style="margin-right: 20px"><span class="pull-right text-muted" id="home-{{divElementId}}-diagram-viewLabel"></span></div>
                <div id="diagram-canvas-{{divElementId}}"></div>
            </div>           
            
        </div>
    </div>
</div>




 <div class='modal fade in' id='{{divElementId}}-configModal' aria-hidden='false' style='display:none;'>
		    	<div class='modal-dialog'>
		          <div class='modal-content'>
		            <div class='modal-header'>
		                <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
		                <h4 class='modal-title'><span class='i18n' data-i18n-id='i18n_options'>Options</span></h4>
            </div>
           <div class='modal-body' id='{{divElementId}}-modal-body'><form role='form' id='{{divElementId}}-options-form'>
    	     <div class='form-group'>
		<div class="checkbox">
            <label>
                 <input type="checkbox" id='{{divElementId}}-displaySynonymsOption' checked> <span class="i18n" data-i18n-id="i18n_display_synonyms2">Display Synonyms along with FSN and preferred terms</       		    span>                
           </label>
        </div>
        <div class="checkbox">
            <label>
               <input type="checkbox" id="{{divElementId}}-displayIdsOption"> <span class="i18n"data-i18n-id="i18n_display_ids">Display Description Ids</span>                
            </label>
        </div>
              <div class='checkbox'>
                <label>                
                    <input type='checkbox' id='{{divElementId}}-displayInactiveDescriptionsOption' unchecked=''> 
			<span class='i18n' data-i18n-id='i18n_display_inactive_descriptions'>
				Display inactive descriptions
			</span>
              </label>
           </div>
         </div>
      </form>
     </div>
           <div class='modal-footer'>
                <button type='button' class='btn btn-danger' data-dismiss='modal'><span class='i18n' data-i18n-id='i18n_cancel'>Cancel</span></button>
                <button id='{{divElementId}}-apply-button' type='button' class='btn btn-success' data-dismiss='modal'><span class='i18n' data-i18n-id='i18n_apply_changes'>Apply changes</span></button>
            </div>
        </div>
    </div>
        </div>
       </div>
