<style nonce='{{ common.CSP_STYLE_NONCE }}'>

    .toggleCustomStyle {
        box-shadow: none;
        background-color: #ffffff !important;
        width: 100% !important;
        border-color: #ddd;
    }

</style>

<div style="">
	<small class="mainpage-tanks__switch" data-showtanks="1" style="
	font-weight: bold; border-left: black solid 1px;
    padding-left: 15px;
    margin-left: -15px;">стрельбы</small>
</div>

<div class="row" style="border-left: dashed #e0e0e0 1px; margin-top: 3px">
    <div class="col-sm-6" style="padding-right: 7px;">
        <input id="toggle-mobile" {% if ui__show_mobile_jobs %}checked{% endif %} data-size="small" data-toggle="toggle" data-onstyle="secondary" data-style="toggleCustomStyle" data-offstyle="secondary" data-on="мобильные" data-off="обычные" type="checkbox">
    </div>
    <div class="col-sm-6" style="padding-left: 7px;">
        <input id="toggle-user" {% if ui__show_user_jobs %}checked{% endif %} data-size="small" data-toggle="toggle" data-onstyle="secondary" data-style="toggleCustomStyle" data-offstyle="secondary" data-on="только мои" data-off="все" type="checkbox">
    </div>
</div>

<div class="mainpage-jobs" data-filter="{{ show_all_jobs }}" style="
    border-left: #e0e0e0 dashed 1px;
    padding-left: 15px;
    margin-left: -15px;
    padding-top: 15px;">
     <div class="mainpage-jobs__panel-online">
     </div>
     <div class="mainpage-jobs__panel-queued">
     </div>
     <div class="mainpage-jobs__panel-offline">
     	<span class="mainpage-jobs__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="onlineJobTemplate">
    <div class="alert alert-warning mainpage-jobs__online">
		<div class="media">
  			<div class="media-body">
				<h4 class="media-heading" style="font-weight: bold;">
					<a class="stream-link" href="/<%= job.n %>"><%= job.n %></a>
					&nbsp;
					<span class="fa fa-stop text-danger stop_button" title="Остановить" id="stop_button__<%= job.n %>" style="cursor: pointer;font-size: 22px;"></span>
					&nbsp;
					<br>
                    <% if (job.task) { %>
						<a style="font-size: smaller;" href="/<%= job.task %>"><%= job.task %></a>
					<% } %>
				</h4>
				<div style="padding-top: 6px;">
					<span id="duration_info_<%= job.n %>"></span>
				</div>
			</div>
			<div class="media-right">
				<a href="//staff.yandex-team.ru/<%= job.person %>" class="auto-person-card auto-person-card-fixed" data-login="<%= job.person %>" title="">
      				<img class="img-circle" src="//center.yandex-team.ru/user/avatar/<%= job.person %>/90/square" title="<%= job.person %>" style="float: right;" height="45" width="45" />
    			</a>
			</div>
		</div>
		<div style="overflow: hidden; padding-top: 3px;">
			<% if (job.name) { %>
    			<strong><%= job.name %></strong>
				<br>
			<% } %>
			<small style="font-style: italic;"><% if (job.tank) { %><%= job.tank %><% } %> → <% if (job.target) { %><%= job.target %><% } %></small>
		</div>
	</div>
</script>


<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="queuedJobTemplate">
    <div class="alert alert-info mainpage-jobs__queued">
		<div class="media">
  			<div class="media-body">
				<h4 class="media-heading" style="font-weight: bold;">
					<a style="color: #333" href="/<%= job.n %>" class="stream-link"><%= job.n %></a>
					&nbsp;
					<span class="fa fa-stop text-danger stop_button" title="Остановить" id="stop_button__<%= job.n %>" style="cursor: pointer;font-size: 22px;"></span>
                    <br>
                    <span style="font-weight: normal; font-size: smaller; color: #333"><%= job.started %></span>
					<br>
					<% if (job.task) { %>
						<a style="font-size: smaller;" href="/<%= job.task %>"><%= job.task %></a>
					<% } %>
				</h4>
			</div>
			<div class="media-right">
				<a href="//staff.yandex-team.ru/<%= job.person %>" class="auto-person-card auto-person-card-fixed" data-login="<%= job.person %>" title="">
      				<img class="img-circle" src="//center.yandex-team.ru/user/avatar/<%= job.person %>/90/square" title="<%= job.person %>" style="float: right;" height="45" width="45" />
    			</a>
			</div>
		</div>
		<div style="overflow: hidden; padding-top: 3px;">
			<% if (job.name) { %>
    			<strong><%= job.name %></strong>
				<br>
			<% } %>
			<span style="font-weight: 400" id="status_<%= job.n %>"><%= job.status %></span>
		</div>
	</div>
</script>


<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="mobileJobTemplate">
    <div class="alert alert-default mainpage-jobs__mobile">
		<div class="media">
  			<div class="media-body">
				<h4 class="media-heading" style="font-weight: bold;">
					<a style="color: #333" href="mobile/<%= job.n %>" class="stream-link"><%= job.n %></a>
					&nbsp;
					<br>
					<% if (job.task) { %>
						<a style="font-size: smaller;" href="/<%= job.task %>"><%= job.task %></a>
					<% } %>
				</h4>
			</div>
			<!--<div class="media-right">
				<a href="/person/<%= job.person %>" class="auto-person-card auto-person-card-fixed" data-login="<%= job.person %>" title="">
      				<img class="img-circle" src="//center.yandex-team.ru/user/avatar/<%= job.person %>/90/square" title="<%= job.person %>" style="float: right;" height="45" width="45" />
    			</a>
			</div>-->
		</div>
		<div style="overflow: hidden; padding-top: 3px;">
			<% if (job.name) { %>
    			<strong><%= job.name %></strong>
				<br>
			<% } %>
		</div>
	</div>
</script>


<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type="text/html" id="offlineJobTemplate">
<div class="offline" id="stream_offl_job_<%= job.n %>">
    <div class="alert alert-default mainpage-jobs__offline">
		<div class="media">
			<div class="media-left">
				<a href="/<%= job.n %>"><div id="job_<%= job.n %>_preview" style="border: 1px none #c5c8d0; width:125px; height:91px; float: left;"></div></a>

  			</div>
  			<div class="media-body">
				<h4 class="media-heading" style="font-weight: bold;"><a class="stream-link" href="/<%= job.n %>"><%= job.n %></a>
				&nbsp;
				<% if (statusIcons[job.quit_status]) { %>
					<span class="<%= statusIcons[job.quit_status] %>"></span>
				<% } else { %>
					<span class="<%= statusIcons['other'] %>"></span>
				<% } %>
                    <a href="/<%= job.n %>/repeat"><i class="fa fa-repeat text-info" title="Повторить" aria-hidden="true"></i></a>
				<br>
				<% if (job.task) { %>
					<a style="font-size: smaller;" href="/<%= job.task %>"><%= job.task %></a>
				<% } %>
				</h4>
			</div>
			<div class="media-right">
				<a href="//staff.yandex-team.ru/<%= job.person %>" class="auto-person-card auto-person-card-fixed" data-login="<%= job.person %>" title="">
      				<img class="img-circle" src="//center.yandex-team.ru/user/avatar/<%= job.person %>/90/square" title="<%= job.person %>" style="float: left;" height="45" width="45" />
    			</a>
  			</div>
		</div>
		<div style="overflow: hidden; padding-top: 3px;">
			<% if (job.name) { %>
    			<strong><%= job.name %></strong>
				<br>
			<% } %>
			<small style="font-style: italic;"><% if (job.tank) { %><%= job.tank.host %><% } %> → <% if (job.srv) { %><%= job.srv.host %><% } %></small>
		</div>
	</div>
</div>
</script>

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