{% load split %}

    <div class="row"  style="position: relative;">
        <div  class="col-md-3">
            <div style="position:absolute; padding-left:10px; display: inline-block;">
                <span style="font-size: 28px; font-weight: bold; white-space: nowrap; line-height: 1;">{{ job.id }}</span>
            </div>
        </div>
        <div class="col-md-6">
            <dl>
                <dd style="font-weight: bold; white-space: normal;">
                    <span class="b-lunapark-offline-meta__title b-editable" id="name" data-action="edit-name">{% if job.name %}{{ job.name }}{% else %}<span style="color: gray;">Имя стрельбы</span>{% endif %}</span>
                    <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>
                                    <input type="text" id="b_editname_block__firename__" class="form-control b_textinput b_textinput__10">
                                </td>
                                <td>
                                <div id="b_editname_block__okey__" class="b_name_edit_block">
                                    <span class="fa fa-check text-success" style="font-size: 12px; cursor:pointer;"></span>
                                </div></td>
                                <td>
                                <div id="b_editname_block__cancel__" class="b_name_edit_block">
                                    <span class="fa fa-ban text-danger" style="font-size: 12px; cursor:pointer;"></span>
                                </div></td>
                                <td>
                                <div id="b_editname_block__ajax__" class="b_name_edit_block" style="display:none;">
                                    <i class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
                                </div></td>
                            </tr>
                        </table>
                    </div>
                </dd>
                <dd style="white-space: normal; max-height: 108px; overflow: auto;">
                    <span class="b-lunapark-offline-meta__description b-editable" id="dsc" data-action="edit-dsc" style="font-size: 80%; white-space: pre-line">{% if job.dsc %}{{ job.dsc }}{% else %}<span style="color: gray;">Описание</span>{% endif %}</span>
                    <span class="fa fa-pencil text-warning" id="dsc_pencil" style="display: none"></span>
                    <div class="b_editcomment_block" style="display: none;">
                        <table>
                            <tr>
                                <td>
                                    <textarea id="b_editname_block__firecomment__" class="form-control b_textinput b_textinput__10 b_textinput__"></textarea></td>
                                <td>
                                <div id="b_editcomment_block__okey__" class="b_name_edit_block2">
                                    <span class="fa fa-check text-success" style="font-size: 12px; cursor:pointer;"></span>
                                </div>
                                <div id="b_editcomment_block__cancel__" class="b_name_edit_block2">
                                    <span class="fa fa-ban text-danger" style="font-size: 12px; cursor:pointer;"></span>
                                </div>
                                <div id="b_editcomment_block__ajax__" class="b_name_edit_block2" style="display:none;">
                                    <i class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
                                </div></td>
                            </tr>
                        </table>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="col-md-3">
            <div style="float:right;">
            	<i id="controls_krutilka" style="display: none;" class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
                {% if is_in_compare %}
                    <i style="margin-left: 4px; margin-right: 0;" class="fa fa-bar-chart b-lunapark-offlinepage__action text-success" data-action="compare" data-actiondetail="remove" title="Убрать из сравнения" aria-hidden="true"></i>
                {% else %}
                    <i style="margin-left: 4px; margin-right: 0;;" class="fa fa-bar-chart b-lunapark-offlinepage__action text-muted" data-action="compare" data-actiondetail="add" title="К сравнению" aria-hidden="true"></i>
                {% endif %}
                <i style="margin-left: 8px; margin-right: 0;" class="fa fa-star b-lunapark-offlinepage__action {% if job.flag %}text-warning{% else %}text-muted{% endif %}" aria-hidden="true" data-action="star" data-task="{{ job.task }}" title="Favorite"></i>
                <i style="margin-left: 4px; margin-right: 0;" class="fa fa-pencil b-lunapark-offlinepage__action text-warning" data-action="edit" title="Редактировать" aria-hidden="true"></i>
                <i style="margin-left: 4px; margin-right: 0;" class="fa fa-trash b-lunapark-offlinepage__action text-danger" data-action="remove" title="Удалить" data-task="{{ job.task }}" aria-hidden="true"></i>
            </div>
        </div>
    </div>
    <div style="float:right; position: relative; bottom: 10px; margin-bottom: -20px;">
        <a class="job-meta__more clickable no-link-deco text-info" data-toggle="collapse" href="#collapseJobMeta">
            <span class="fa fa-plus" style="font-size: 14px;"></span>
        </a>
    </div>
	<div class="panel-collapse collapse" id="collapseJobMeta">
        <div class="panel-body" >
			<hr style="border: none; border-top: 1px solid #EEE; margin: 1em 0.5em;">
            <div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					ID:
				</div>
				<div class="col-md-9">
					{{ job.test_id }} &nbsp;
				</div>
			</div>
            <div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Приложение:
				</div>
				<div class="col-md-9">
					{{ job.app }} &nbsp;
				</div>
			</div>
			<div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Версия:
				</div>
				<div class="col-md-9">
					{{ job.ver }} &nbsp;
				</div>
			</div>
            <div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					OS:
				</div>
				<div class="col-md-9">
					{{ job.device_os }} &nbsp;
				</div>
			</div>
			<div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Устройство:
				</div>
				<div class="col-md-9">
					{{ job.device_model }}&nbsp;({{ job.device_id }})&nbsp;
				</div>
			</div>
            <div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Танк:
				</div>
				<div class="col-md-9">
					{{ job.tank }} &nbsp;
				</div>
			</div>
            {% if job.component %}
				<div class="row">
					<div class="col-md-3" style="font-weight: 500;">
						Регрессия:
					</div>
					<div class="col-md-9">
						<a href="/mobileregress/{{ component.tag }}/{{ component.n }}"> {{ component.name }}</a>
					</div>
				</div>
				{% endif %}
			<div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Инстансов phantom:
				</div>
				<div class="col-md-9">
					{{ job.instances }}
				</div>
			</div>
			<div class="row">
				<div class="col-md-3" style="font-weight: 500;">
					Команда запуска:
				</div>
				<div class="col-md-9">
					{{ job.command_line }}
				</div>
			</div>
        <br>
		</div>
    </div>

<!-- Modal -->
<div class="modal fade" id="thankModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><span class="person">{{ job.person }}</span>, спасибо тебе за..</h4>
      </div>
      <div class="modal-body">
        <form method="POST" action="/person/{{ job.person }}/thank/" id="thankForm">
	        {% csrf_token %}
	        <input placeholder="Текст спасибы" size=13 class="form-control" type="text" name="text">
	        <br>
			<input class="btn btn-brand" type="button" id="submitThank" value="Сказать" style="margin-right: 5px;">
            <i id="thKrutilka" style="display: none;" class="krutilka fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
			<span id="success" class='text-success' style="opacity: 0;"><i class="fa fa-check"></i>&nbsp;OK</span>
			<span id="fail" class='text-danger' style="opacity: 0;"><i class="fa fa-close"></i>&nbsp;FAILED</span>
        </form>
      </div>
    </div>
  </div>
</div>

<link href="/media/css/mobilepage.css?version=43.4" type="text/css" rel="stylesheet" />
<script nonce='{{ common.CSP_SCRIPT_NONCE }}' type='text/javascript' src='/media/js/mobilepage/meta.js?version=43.4'></script>
