<div style='margin: 5px; height:95%;' class='panel panel-default'>
    <div class='panel-heading'>
        <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;left: 15px;'><i class='glyphicon glyphicon-bookmark'></i></button>
        <div class='row'>
            <div class='col-md-8' id='{{divElementId}}-panelTitle'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<strong><span class='i18n' data-i18n-id='i18n_search'>Search</span></span></strong></div>
            
        </div>
    </div>
    <div class='panel-body' style='height:86%' id='{{divElementId}}-panelBody'>
        <form>
            <div class="form-group" style="margin-bottom: 2px;">
                <label for="{{divElementId}}-searchBox">
                    <span class="i18n" data-i18n-id="i18n_type_3_chars">Type at least 3 characters</span> <i class="glyphicon glyphicon-remove text-danger" id="{{divElementId}}-typeIcon"></i> <span id="{{divElementId}}-searchExample"></span></label>
                <br><div class="btn-group" style="width: 100%;"><input data-droppable="true" ondrop="dropS(event);" ondragover="removeHighlight();" ondragstart="allowDrop(event);" type="search" class="form-control" id="{{divElementId}}-searchBox" placeholder="Search..." autocomplete="off">
                <span id="{{divElementId}}-clearButton" class="searchclear glyphicon glyphicon-remove-circle"></span></div>
            </div>
        </form>
        <div id='{{divElementId}}-searchConfigBar' style='margin-bottom: 10px;'><nav class='navbar navbar-default' role='navigation' style='min-height: 28px;border-radius: 0px;border-bottom: 1px lightgray solid;'>
            <ul class='nav navbar-nav navbar-left'>               
                <li class='dropdown' style='margin-bottom: 2px; margin-top: 2px;'>
                    <a href='javascript:void(0);' class='dropdown-toggle' data-toggle='dropdown' style='padding-top: 2px; padding-bottom: 2px;'><span id='{{divElementId}}-navStatusFilterLabel'></span> <b class='caret'></b></a>
                    <ul class='dropdown-menu' role='menu' style='float: none;'>
                        <li><button class='btn btn-link' id='{{divElementId}}-activeOnlyButton'><span class='i18n' data-i18n-id='i18n_active_only'>Active components only</span></button></li>
                        <li><button class='btn btn-link' id='{{divElementId}}-activeInactiveButton'><span class='i18n' data-i18n-id='i18n_active_and_inactive'>Active and inactive components</span></button></li>
                        <li><button class='btn btn-link' id='{{divElementId}}-inactiveOnlyButton'><span class='i18n' data-i18n-id='i18n_inactive_only'>Inactive components only</span></button></li>
                    </ul>
                </li>
            </ul>
        </nav></div>
        <div class='panel panel-default' style='height:70%;overflow:auto;margin-bottom: 15px;min-height: 300px;' id='{{divElementId}}-resultsScrollPane'>
            <div id="{{divElementId}}-searchBar"></div>
            <div id="{{divElementId}}-searchFilters"></div>
            <table class='table table-bordered'>
                <tbody  id='{{divElementId}}-resultsTable'>
                </tbody>
            </table>
        </div>
    </div>
</div>
        