<div class="job-tabpanel" data-id="{{ job.id }}" style="border-top: 1px solid rgba(0, 0, 0, 0.125);">
	<div class="tab-content job-tabpanel__panels" id="job-tabpanel__panels">
		<span class="job-tabpanel__krutilka"><i class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>&ensp;Загрузка фильтров... </span>
	</div>
</div>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="tabTemplate">
	<li class="nav-item job-tabpanel__tab" id="job-tabpanel__tab__<%= tab %>" data-tab="<%= tab %>">
			<% if (tab.split('__')[0] == "custom") { %>
				<a class="onlinepage__tab nav-link" href="#job-tabpanel__panel__<%= tab %>" data-toggle="tab" data-tab="<%= tab %>" style="padding-right: 32px;">
					<%= title %>
				</a>
				<span class="fa fa-times-circle-o delete-custom-report" data-id=<%= tab.split('__')[1] %> data-title=<%= title %>></span>
			<% } else { %>
				<a class="onlinepage__tab nav-link" href="#job-tabpanel__panel__<%= tab %>" data-toggle="tab" data-tab="<%= tab %>">
					<%= title %>
				</a>
			<% } %>
	</li>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="panelTemplate">
	<div role="tabpanel" class="tab-pane job-tabpanel__panel b-overload-offline-panel" id="job-tabpanel__panel__<%= tab %>"></div>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="controlsTemplate">
    <div class="btn-group btn-group-sm job-controls__group" data-toggle="buttons" id="job-controls__group__<%= tab %>__<%= name %>" role="group">
	</div>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="buttonTemplate">
    <button class="btn btn-secondary job-controls__<%= tab %>__button" data-control="<%= controls_name %>" data-val="<%= button_name %>" >
		<%= button_title %>
	</button>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="progressBarTemplate">
<div class="row">
	<div class="col-md-11" style="padding-right: 55px;">
    	<div class="progress">
	  		<div class="progress-bar progress-bar-brand progress-bar-striped active" style="background-color: #91AF59; width:<%= progressBar.percentage %>%" aria-valuenow="<%= progressBar.now %>" aria-valuemin="<%= progressBar.min %>" aria-valuemax="<%= progressBar.max %>">
	  	 		<span><%= progressBar.nowformatted %></span>
	  		</div>
	  		<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:<%= progressShift.percentage %>%" aria-valuenow="<%= progressShift.now %>" aria-valuemin="<%= progressShift.min %>" aria-valuemax="<%= progressShift.max %>">
	    		<span title="Отставание"><%= progressShift.nowformatted %></span>
	  		</div>
		</div>
	</div>
	<div class="col-md-1">
		<button type="button" class="btn btn-secondary" id="online_stop" style="margin-top: 35px; margin-left: 10px;">
			Остановить
		</button> 
		<div class="input-group" id="online_stop__dialog" style="display: none; margin-top: 35px; margin-left: 10px;">
			<span class="input-group-addon" id="basic-addon3">
				Остановить?
			</span>
			<span class="input-group-btn">
				<button type="button" class="btn btn-danger" id="online_stop__ok" data-job="{{ job.n }}">  
				                     Да
				</button>
				<button type="button" class="btn btn-secondary" id="online_stop__cancel">
				                     Нет
				</button>
			</span>
		</div>
	</div>
</div>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="plotsContainerTemplate">
	<div class="row b-overload-onlinepage__charts" id="b-overload-onlinepage__charts__<%= tab %>">
	</div>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="plotTemplate">
	<div class="col-lg-6 job-plots__container" id="job-plots__<%= tab %>__<%= plot_type %><%= host %>" data-host="<%= host %>">
		<span class="job-plots__krutilka" id="job-plots__krutilka__<%= plot_type %><%= host %>"><i class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>&ensp;<%= plot_type %>@<%= host %></span>
    </div>
</script>

<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="noDataTemplate">
	<div style="text-align: center; padding-top: 10px; color: #3E576F; font-size: 16px;"><%= plotType %>@<%= host %></div>
	<div style="padding: 2em 0; text-align: center; color: #3E576F; font-size: 300%;">No Data</div>
</script>

<script  type="text/html" id="customToggleTemplate">
	<li role="presentation" class="nav-item" id="cur-toggle-tab">
		<a aria-expanded="false" href="#" id="cur-toggle" class="onlinepage__tab nav-link" data-toggle="modal" data-target="#cur-contents" aria-controls="cur-contents">
			<i style="cursor: pointer; color: #A0A0A0; font-size: 18px;" class="fa fa-plus"></i>
		</a>
	</li>
    <div class="modal fade" aria-labelledby="cur-toggle" tabindex="-1" role="dialog" id="cur-contents">
    </div>
</script>

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