<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/javascript">
// При нажатии на Enter 
function testForEnter(event) 
{   
	if (event.key == "Enter") {
		$("#submitGrep").click()
	}
}
</script>

<div>
	<div id="krutilka" style="margin: 15px; position: absolute;"><i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>&ensp;PLEASE STAND BY..</div>
    <div style="padding-top: 20px;"></div>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="quantiles_tab_panel">
            <div id="mobileQuantilesChartContainer"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="fragments_tab_panel">
            <div id="mobileFragmentsTableContainer"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="raw_tab_panel">
            <div class="row">
                <div class="col-xl-6" id="mobileRawChartColumn" style="margin-bottom: 2rem;">
                    <div id="fragmentsContainer"></div>
                    <div id="mobileRawChartContainer" style="height: 600px;margin-left: -15px;"></div>
                </div>
                <div class="col-xl-6" id="logsTableColumn" style="padding-left: 40px;">
                    <div class="input-group" id="grepContainer" style="margin-bottom: 20px; display: none;">
                        <span class="input-group-addon firestarter-input__title">Filter</span>
                        <input type="text" id="grep" class="form-control" placeholder="" value="" onkeydown="testForEnter(event);"/>
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" type="button" id="submitGrep">Go!</button>
                        </span>
                    </div>
                    <div style="width:100%;
                                height: 34rem;
                                overflow:auto;
                                -moz-user-select: none;
                                -webkit-user-select: none;
                                -ms-user-select:none;
                                user-select:none;
                                -o-user-select:none;"
                         unselectable="on"
                         onselectstart="return false;"
                         onmousedown="return false;"
                         id="logScrollBox">
                        <table class="table table-striped table-sm table-responsive" id="log_table">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/mobilepage/tabpanel.js?version=43.4'></script>