{% load split %}
    <div class="card-header" style="padding-bottom:0px;">
	  	<div class="row"  style="position: relative;">
	  		<div  class="col-sm-2">
				<div style="position:absolute; display: inline-block;">
					<span style="font-size: 28px; font-weight: bold; white-space: nowrap; line-height: 1;">{{ job.id }}</span>
                    <br>
					<span style="font-size: 80%; font-weight: bold; white-space: nowrap; line-height: 1;" title="{{ job.cool_id }}">{{ job.cooler_id }}</span>
				</div>
				{% if owner %}
				<button type="button" class="btn btn-secondary" id="online_stop" style="margin-top: 35px;">  
			          Stop test
				</button> 
				<div class="input-group" id="online_stop__dialog" style="display: none; margin-top: 35px;">
			  		<span class="input-group-addon" id="basic-addon3">
			           Stop test?
			        </span>
			        <span class="input-group-btn">
				        <button type="button" class="btn btn-danger" id="online_stop__ok" data-job="{{ job.n }}">  
				                     Yes
				        </button>
				        <button type="button" class="btn btn-secondary" id="online_stop__cancel">  
				                     No
						</button>
					</span>
				</div>
				{% endif %}

			</div>
			<div class="col-sm-2" id="codesIndicators">
				<span>{{ job.data_started|date:"d M 'y H:i:s" }} ({{ job.duration }})</span>
				<div style="padding:5px 0;">
					<b class="tag {% if net_errors != 0 %}tag-danger{% else  %}tag-success{% endif %} b-overload-onlinepage__indicator" id="netIndicator">net</b>
					&nbsp;
					{% if http_codes.2 %}<b class="tag tag-success b-overload-onlinepage__indicator" title="http" id="http200Indicator">2xx</b>{% endif %}
					{% if http_codes.3 %}<b class="tag tag-info b-overload-onlinepage__indicator" title="http" id="http300Indicator">3xx</b>{% endif %}
					{% if http_codes.4 %}<b class="tag tag-warning b-overload-onlinepage__indicator" title="http" id="http400Indicator">4xx</b>{% endif %}
					{% if http_codes.5 %}<b class="tag tag-danger b-overload-onlinepage__indicator" title="http" id="http500Indicator">5xx</b>{% endif %}
				</div>
			</div>
			<div class="col-sm-3">
				<dl>
					<dd style="font-weight: bold; white-space: normal;">
						<span class="b-overload-offline-meta__title {% if owner %}b-editable{% endif %}" id="name" data-action="edit-name">{% if job.name %}{{ job.name }}{% else %}<span style="color: gray;">Test name</span>{% endif %}</span>
						{% if owner %}
						<span class="fa fa-pencil text-warning" id="name_pencil" style="display: none;"></span>
						<div class="b_editname_block" style="display: none;">
							<table>
								<tr>
									<td width="100%">
										<input type="text" id="b_editname_block__firename__" class="form-control">
									</td>
									<td>
									<div id="b_editname_block__okey__">
										<span class="fa fa-check text-success b-editable" style="font-size: 12px; cursor: pointer;"></span>
									</div></td>
									<td>
									<div id="b_editname_block__cancel__">
										<span class="fa fa-ban text-danger b-editable" style="font-size: 12px; cursor: pointer;"></span>
									</div></td>
									<td>
									<div id="b_editname_block__ajax__"style="display:none;">
										<span class="krutilka fa fa-circle-o-notch fa-spin"></span>
									</div></td>
								</tr>
							</table>
						</div>
						{% endif %}
					</dd>
					<dd style="white-space: normal; max-height: 108px; overflow: auto;">
						<span class="b-overload-offline-meta__description {% if owner %}b-editable{% endif %}" id="dsc" data-action="edit-dsc" style="font-size: 80%; white-space: pre-line">{% if job.dsc %}{{ job.dsc }}{% else %}<span style="color: gray;">Description</span>{% endif %}</span>
						{% if owner %}
						<span class="fa fa-pencil text-warning" id="dsc_pencil" style="display: none;"></span>
						<div class="b_editdsc_block" style="display: none;">
							<table>
								<tr>
									<td width="100%">
										<textarea id="b_editdsc_block__dsc__" class="form-control"></textarea></td>
									<td>
									<div id="b_editdsc_block__okey__">
										<span class="fa fa-check text-success" style="font-size: 12px; cursor: pointer;"></span>
									</div>
									<div id="b_editdsc_block__cancel__">
										<span class="fa fa-ban text-danger" style="font-size: 12px; cursor: pointer;"></span>
									</div>
									<div id="b_editdsc_block__ajax__" style="display:none;">
										<span class="krutilka fa fa-circle-o-notch fa-spin"></span>
									</div></td>
								</tr>
							</table>
						</div>
						{% endif %}
					</dd>
				</dl>
			</div>
			<div class="col-sm-3" style="padding-top: 10px;">
				<div style="float: right">
			  		<span>
			           Show
			        </span>
			        <div class="btn-group">
						<button type="button" class="btn btn-secondary btn-sm onlinepage__show active" data-limit="60">
							1m
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__show" data-limit="300">
							5m
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__show" data-limit="600">
							10m
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__show" data-limit="3600">
							1h
						</button>
					</div>
				</div>
				<br>
				<br>
				<div style="float: right">
			  		<span>
						Refresh every			           
			        </span>
			        <div class="btn-group">
						<button type="button" class="btn btn-secondary btn-sm onlinepage__refresh" data-refresh="2">
							2s
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__refresh active" data-refresh="3">
							3s
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__refresh" data-refresh="5">
							5s
						</button>
						<button type="button" class="btn btn-secondary btn-sm onlinepage__refresh" data-refresh="10">
							10s
						</button>
					</div>
				</div>
			</div>
			<div class="col-sm-2">
				<div style="float: right;">
					{% if user_avatar_link %}
						{% if user_profile_link %}
							<a target="_blank" href="{{ user_profile_link }}">
								<img src="{{ user_avatar_link }}" style="border-radius: 50%" height="60" width="60" />
							</a>
						{% else %}
							<img src="{{ user_avatar_link }}" style="border-radius: 50%" height="60" width="60" />
						{% endif %}
					{% endif %}
				</div>
			</div>
		</div>
		<ul class="nav nav-tabs card-header-tabs pull-xs-left job-tabpanel__tabs" id="job-tabpanel__tabs">
		</ul>
	</div>
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/onlinepage/meta.js?version=37'></script>
