{% load sexy_bytes %}
{% load lookup %}

<div class="card">
    <div class="card-header" style="margin-bottom: -1px;">
        <h5 style="margin-bottom: 0;" class="panel-title clickable" role="button" data-toggle="collapse" href="#collapseAmmo" aria-expanded="true" aria-controls="collapseOne">
	        <span>Мои патроны</span>
	        <span class="caret"></span>
        </h5>
    </div>
    <div id="collapseAmmo" class="collapse {% if user_ammo %}in{% endif %}" role="tabpanel" aria-labelledby="headingOne">
	    <div class="card-block projects" id="projects_popup">
	        <table class="table table-hover table-sm">
	        	<thead>
	        		<tr>
	        			<th>Имя</th>
	        			<th>Размер</th>
	        			<th>Загружено</th>
	        			<th>Last used</th>
	        			<th>Действия</th>
	        		</tr>
	        	</thead>
	        	<tbody>
	        	{% for ammo in user_ammo %}
	        		<tr>
	        			<td>
	        			<span class="ammo_dsc b-editable" id="ammo_dsc__{{ ammo.id }}" data-ammo="{{ ammo.id }}" title="{{ ammo.path }}">{{ ammo.dsc }}</span>
	        			<span class="fa fa-pencil text-warning" id="ammo_dsc_pencil__{{ ammo.id }}" style="display: none"></span>
						<div class="ammo_dsc_edit" id="ammo_dsc_edit__{{ ammo.id }}" style="display: none">
							<table>
								<tr>
									<td>
										<textarea id="ammo_dsc_text__{{ ammo.id }}" class="form-control">{{ ammo.dsc }}</textarea>
									</td>
									<td style="padding-left: 3px;">
									<div id="ammo_dsc_edit__okey__{{ ammo.id }}" data-ammo="{{ ammo.id }}" class="ammo_dsc_edit__button ammo_dsc_edit__okey">
										<i class="fa fa-check text-success" style="font-size: 12px;"></i>
									</div>
									<div id="ammo_dsc_edit__cancel__{{ ammo.id }}" data-ammo="{{ ammo.id }}" class="ammo_dsc_edit__button ammo_dsc_edit__cancel">
										<i class="fa fa-ban text-danger" style="font-size: 12px;"></i>
									</div>
									</td>
								</tr>
							</table>
						</div>
	        			</td>
	        			<td>{{ ammo.size|sexy_bytes }}</td>
	        			<td>{{ ammo.created_at|date:'d/m/y' }}</td>
	        			<td>{{ ammo.last_used|date:'d/m/y H:i' }}</td>
	        			<td>
							<i class="fa fa-star ammo__action {% if ammo.flag %}text-warning{% else %}text-muted{% endif %}" aria-hidden="true" data-action="star" data-ammo="{{ ammo.id }}" title="Favorite"></i>
							<i class="fa fa-share-alt ammo__action text-info" data-action="share" data-toggle="modal" data-target="#ammoShareModal__{{ ammo.id }}" data-ammo="{{ ammo.id }}" data-ammopath="{{ ammo.path }}" title="Поделиться" aria-hidden="true"></i>
							<i class="fa ammo__action {% if ammo.hidden %}fa-eye-slash text-danger{% else %}fa-eye text-success{% endif %}" data-action="visibility" title="{% if ammo.hidden %}Не {% endif %}Показывать" data-ammo="{{ ammo.id }}" aria-hidden="true"></i>
							<i class="fa ammo__action {% if ammo.private %}fa-lock text-danger{% else %}fa-unlock text-success{% endif %}" data-action="private" title="Private" data-ammo="{{ ammo.id }}" aria-hidden="true"></i>
	        			</td>
	        			<!-- Modal -->
						<div class="modal fade" id="ammoShareModal__{{ ammo.id }}" 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">Поделиться патронами</h4>
						        <span style="font-style: italic;">{{ ammo.dsc }}</span>
						        <div id='shared-block__{{ ammo.id }}'></div>
						      </div>
						      <div class="modal-body">
						        <input placeholder="логины пользователей через запятую" oninput="getLogins(this)" type="text" id="ammoSharePerson__{{ ammo.id }}" class="form-control ammoSharePerson" data-ammo="{{ ammo.id }}"></input>
					        	<br>
					        	<ul id="ammoPersonToShare__{{ ammo.id }}">
						        </ul>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-default" id="ammoShareDismiss__{{ ammo.id }}" data-dismiss="modal">Отмена</button>
						        <button type="button" class="btn btn-brand ammoShareSubmit" id="ammoShareSubmit__{{ ammo.id }}" data-ammo="{{ ammo.id }}">Поделиться</button>
						      </div>
						    </div>
						  </div>
						</div>
	        		</tr>
	        	{% endfor %}
	        	</tbody>
	        </table>
	    </div>
	</div>
</div>


<script nonce='{{ common.CSP_SCRIPT_NONCE }}'>

function getLogins(el) {
	var startswith = $(el).val().split(',');
	startswith = startswith[startswith.length-1].trim();
	var ammo_id = $(el).data('ammo');
	
	if (startswith) {
		$.getJSON("/mainpage/get_logins?startswith=" + startswith).done(function(data) {
			$("#ammoPersonToShare__"+ammo_id).html("");
			for (var i=0; i < data.length; i++) {
				$("#ammoPersonToShare__"+ammo_id).append('<li class="login_suggest person" data-ammo="'+ammo_id+'">'+data[i]+'</li>')
            }
            $(".login_suggest").bind('click', function(){
				values = $("#ammoSharePerson__"+$(this).data("ammo")).val().split(',');
				values = values.slice(0, values.length-1);
				preserved = [];
				for (var j=0; j < values.length; j++)
					preserved.push(values[j].trim()) 
				preserved = preserved.join(', ');
				if (preserved) {
					preserved = preserved + ', '
				}
				$("#ammoSharePerson__"+$(this).data("ammo")).val(preserved + $(this).text() + ', ')
			});
		})
	}
	else {
		$("#ammoPersonToShare__"+ammo_id).html("")
	}
}

</script>

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