{# Rendered standalone for filter keystrokes (?partial=1) and included by files.html
   for a full page load. The filter input lives outside this fragment so a swap
   never steals focus or the caret. The pager sits inside it, because filtering
   changes the count and the number of pages. #}
{% import 'partials/pager.html' as pager %}
{{ pager.pager(page, per_page, total, page_href, size_options=per_page_options) }}
<table>
	{% for song in songs %}
	{% set display_name = filename_from_path(song) %}
	<tr value="{{ song }}">
		{# Bulma pads every cell 0.5em vertically and top-aligns it, so the vertical
		   half has to match or the number floats above the title it numbers. #}
		<td style="padding: 0.5em 0">{{loop.index + skip}}</td>
		<td id="{{display_name[0].lower()}}" style="padding-right: 0">
			<a
				class="add-song-link has-text-weight-bold has-text-success"
				title="Add '{{display_name}}' to queue"
				href="#"
				data-song="{{url_escape(song.encode('utf-8','surrogateescape'))}}"
				><i class="icon icon-list-add"></i>
			</a>
		</td>
		<td class="break-word" style="padding-right: 0">{{display_name}}</td>
		{% if admin %}
		<td style="padding-right: 0">
			<a
				class="edit-button"
				href="{{url_for('files.edit_file')}}?song={{url_escape(song.encode('utf-8','surrogateescape'))}}&referrer={{url_escape(current_url)}}"
				title="Rename song"
				><i class="icon icon-edit-1"></i>
			</a>
		</td>
		{% endif %}
	</tr>
	{% endfor %}
</table>

{# The top pager always renders: it carries the count and the size control, which
   are worth having even on a single page. This one exists only to save scrolling
   back up, so it appears only when there is somewhere to scroll back up from. #}
{% if total > per_page %}
{{ pager.pager(page, per_page, total, page_href) }}
{% endif %}