{% extends "base.html" %}
{% block content %}
<p>You have {{ files|length() }} uploaded files totaling {{ total_size }}.</p>
<table class="table table-striped">
<thead>
	<tr>
		<th>File</th>
		<th></th>
		<th>Size</th>
		<th>Date</th>
		<th></th>
	</tr>
</thead>
<tbody>
	{% for file in files %}
	<tr>
		<td>
			<a href="{{ url_for('.file', hash = file.hash, filename = file.filename) }}" id="filename-{{ loop.index }}">{{ file.filename }}</a>
		</td>
		<td>
			<small>
				<a href="{{ url_for('.file', hash = file.hash) }}">hash</a>
				{% if file.ext %}
				&ndash; <a href="{{ url_for('.file', hash = file.hash, ext = file.ext) }}">ext.</a>
				{% endif %}
			</small>
		</td>
		<td>{{ file.formatted_size }}</td>
		<td>{{ file.formatted_date }}</td>
		<td>
			<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modal-filename" data-index="{{ loop.index }}" data-file-hash="{{ file.hash }}">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
				<span class="sr-only">Rename</span>
			</button>
			<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal-delete" data-index="{{ loop.index }}" data-file-hash="{{ file.hash }}">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
				<span class="sr-only">Delete</span>
			</button>
		</td>
	</tr>
	{% else %}
	<tr><td colspan="5"><em>(No file uploads yet.)</em></td></tr>
	{% endfor %}
</tbody>
</table>
{% include "file-modals.html" %}
{% endblock %}
{% block scripts %}
<script>
$('#modal-filename').on('show.bs.modal', function(event) {
	$('#modal-filename-spinner').hide();
	var button = $(event.relatedTarget);
	var filename = $('#filename-' + button.data('index')).text().trim();
	$(this).find('input#filename').val(filename);
	$(this).find('input.hash').val(button.data('file-hash'));
}).on('shown.bs.modal', function(event) {
	$(this).find('input#filename').focus();
});
$('#modal-filename-confirm').click(function(event) {
	$('#modal-filename-spinner').show();
});
$('#modal-delete').on('show.bs.modal', function(event) {
	$('#modal-delete-spinner').hide();
	var button = $(event.relatedTarget);
	var filename = $('#filename-' + button.data('index')).text().trim();
	$(this).find('#modal-delete-filename').text(filename);
	$(this).find('input.hash').val(button.data('file-hash'));
});
$('#modal-delete-confirm').click(function(event) {
	$('#modal-delete-spinner').show();
});
</script>
{% endblock %}