{% 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="#collapsePandoraBinary" aria-expanded="true" aria-controls="collapseOne">
	        <span>Мои пушки (pandora)</span>
	        <span class="caret"></span>
        </h5>
    </div>
    <div id="collapsePandoraBinary" class="collapse {% if user_pandora_binaries %}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 pandora_binary in user_pandora_binaries %}
	        		<tr>
	        			<td>
	        			<span class="pandora_binary_dsc b-editable" id="pandora_binary_dsc__{{ pandora_binary.id }}" data-pandora_binary="{{ pandora_binary.id }}" title="{{ pandora_binary.path }}">{{ pandora_binary.dsc }}</span>
	        			<span class="fa fa-pencil text-warning" id="pandora_binary_dsc_pencil__{{ pandora_binary.id }}" style="display: none"></span>
						<div class="pandora_binary_dsc_edit" id="pandora_binary_dsc_edit__{{ pandora_binary.id }}" style="display: none">
							<table>
								<tr>
									<td>
										<textarea id="pandora_binary_dsc_text__{{ pandora_binary.id }}" class="form-control">{{ pandora_binary.dsc }}</textarea>
									</td>
									<td style="padding-left: 3px;">
									<div id="pandora_binary_dsc_edit__okey__{{ pandora_binary.id }}" data-pandora_binary="{{ pandora_binary.id }}" class="pandora_binary_dsc_edit__button pandora_binary_dsc_edit__okey">
										<i class="fa fa-check text-success" style="font-size: 12px;"></i>
									</div>
									<div id="pandora_binary_dsc_edit__cancel__{{ pandora_binary.id }}" data-pandora_binary="{{ pandora_binary.id }}" class="pandora_binary_dsc_edit__button pandora_binary_dsc_edit__cancel">
										<i class="fa fa-ban text-danger" style="font-size: 12px;"></i>
									</div>
									</td>
								</tr>
							</table>
						</div>
	        			</td>
	        			<td>{{ pandora_binary.size|sexy_bytes }}</td>
	        			<td>{{ pandora_binary.created_at|date:'d/m/y' }}</td>
	        			<td>{{ pandora_binary.last_used|date:'d/m/y H:i' }}</td>
	        			<td>
							<i class="fa fa-star pandora_binary__action {% if pandora_binary.flag %}text-warning{% else %}text-muted{% endif %}" aria-hidden="true" data-action="star" data-pandora_binary="{{ pandora_binary.id }}" title="Favorite"></i>
							<i class="fa fa-share-alt pandora_binary__action text-info" data-action="share" data-toggle="modal" data-target="#pandoraBinaryShareModal__{{ pandora_binary.id }}" data-pandora_binary="{{ pandora_binary.id }}" data-pandora_binarypath="{{ pandora_binary.path }}" title="Поделиться" aria-hidden="true"></i>
							<i class="fa pandora_binary__action {% if pandora_binary.hidden %}fa-eye-slash text-danger{% else %}fa-eye text-success{% endif %}" data-action="visibility" title="{% if pandora_binary.hidden %}Не {% endif %}Показывать" data-pandora_binary="{{ pandora_binary.id }}" aria-hidden="true"></i>
							<i class="fa pandora_binary__action {% if pandora_binary.private %}fa-lock text-danger{% else %}fa-unlock text-success{% endif %}" data-action="private" title="Private" data-pandora_binary="{{ pandora_binary.id }}" aria-hidden="true"></i>
	        			</td>
	        			<!-- Modal -->
						<div class="modal fade" id="pandoraBinaryShareModal__{{ pandora_binary.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;">{{ pandora_binary.dsc }}</span>
						        <div id='shared-block__{{ pandora_binary.id }}'></div>
						      </div>
						      <div class="modal-body">
						        <input placeholder="логины пользователей через запятую" oninput="getLogins(this)" type="text" id="pandoraBinarySharePerson__{{ pandora_binary.id }}" class="form-control pandoraBinarySharePerson" data-pandora_binary="{{ pandora_binary.id }}"></input>
					        	<br>
					        	<ul id="pandoraBinaryPersonToShare__{{ pandora_binary.id }}">
						        </ul>
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-default" id="pandoraBinaryShareDismiss__{{ pandora_binary.id }}" data-dismiss="modal">Отмена</button>
						        <button type="button" class="btn btn-brand pandoraBinaryShareSubmit" id="pandoraBinaryShareSubmit__{{ pandora_binary.id }}" data-pandora_binary="{{ pandora_binary.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 pandora_binary_id = $(el).data('pandora_binary');
	
	if (startswith) {
		$.getJSON("/mainpage/get_logins?startswith=" + startswith).done(function(data) {
			$("#pandoraBinaryPersonToShare__"+pandora_binary_id).html("");
			for (var i=0; i < data.length; i++) {
				$("#pandoraBinaryPersonToShare__"+pandora_binary_id).append('<li class="login_suggest person" data-pandora_binary="'+pandora_binary_id+'">'+data[i]+'</li>')
            }
            $(".login_suggest").bind('click', function(){
				values = $("#pandoraBinarySharePerson__"+$(this).data("pandora_binary")).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 + ', '
				}
				$("#pandoraBinarySharePerson__"+$(this).data("pandora_binary")).val(preserved + $(this).text() + ', ')
			});
		})
	}
	else {
		$("#pandoraBinaryPersonToShare__"+pandora_binary_id).html("")
	}
}

</script>

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