{% extends 'base.html' %}

{% block scripts %}
<script>
	// Every control on this page reloads it with a new query string: the lists
	// are server-rendered top-N, so there is nothing here to update in place.
	// Each control carries the others' values so changing one does not reset them.
	function applyRankingLimits() {
		var params = $.param({
			session: {{ selected_session | tojson }},
			songs: $("#limit-songs").val(),
			performers: $("#limit-performers").val()
		});
		window.location.href = "{{ url_for('sessions.rankings') }}?" + params;
	}

	// The add links need no handler here: base.html delegates add-song-link
	// clicks from the document, and a second binding would queue the song twice.
</script>
{% endblock %}

{# A right-aligned "Show N" control row below a list, reloading with the chosen
   row count. These lists are top-N rather than paged, so this says how much of
   the chart to see -- it is not the page size the tables elsewhere use. #}
{% macro limit_select(name, current) %}
<div class="rankings-controls">
	<span class="is-flex-grow-1"></span>
	{# MSG: Label before the dropdown choosing how many ranked rows to show. #}
	<label class="is-size-7" for="limit-{{ name }}">{% trans %}Show{% endtrans %}</label>
	<div class="select is-small">
		<select id="limit-{{ name }}" onchange="applyRankingLimits()">
			{% for n in ranking_sizes %}
			<option value="{{ n }}"{% if n == current %} selected{% endif %}>{{ n }}</option>
			{% endfor %}
		</select>
	</div>
</div>
{% endmacro %}

{# Both charts are ranked lists of a name and a count, so they share a header. #}
{% macro ranking_head(what) %}
<thead>
	<tr>
		{# MSG: Ranking table column header for a row's position in the chart. #}
		<th>{% trans %}Rank{% endtrans %}</th>
		<th>{{ what }}</th>
		{# MSG: Ranking table column header for how many times something was played. #}
		<th class="has-text-right">{% trans %}Plays{% endtrans %}</th>
	</tr>
</thead>
{% endmacro %}

{% block header %}
<style>
	/* The global `table` rule already fixes the layout, which is what lines the
	   play counts up down the page across both tables. */
	.rankings-table {
		margin-bottom: 0;
	}
	/* The row-count control sits just under its table and is pushed to the
	   right. Its bottom margin is what separates one chart from the next. */
	.rankings-controls {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 8px;
		margin-bottom: 25px;
	}
	.rankings-table td {
		word-wrap: break-word;
	}
	/* Wide enough for the headers above them -- "Rank" and "Plays" are single
	   words and cannot wrap -- and no wider, so the song column takes the rest. */
	.rankings-table .col-rank {
		width: 4em;
	}
	.rankings-table .col-count {
		width: 5em;
	}
	/* The add-to-queue plus leads the title it queues. Fontello's symmetric side
	   margins go: the left one would indent the plus out of line with the column
	   above it, and the right one is the gap to the title. */
	.rankings-table .add-song-link i:before {
		margin-left: 0;
		margin-right: 0.4em;
	}
	/* Dimmed rather than recoloured on hover: has-text-success is a Bulma helper
	   and therefore !important, and green is the point of the control. */
	.rankings-table .add-song-link:hover {
		opacity: 0.75;
	}
	/* On a phone the desktop column widths would leave too little for the song
	   title, so they tighten to what the headers still need. */
	@media screen and (max-width: 600px) {
		.rankings-table {
			font-size: 0.9rem;
		}
		.rankings-table th,
		.rankings-table td {
			padding-left: 4px;
			padding-right: 4px;
		}
		.rankings-table .col-rank {
			width: 3em;
		}
		.rankings-table .col-count {
			width: 3.6em;
		}
	}
</style>
{% endblock %}

{% block content %}

{% include 'partials/session_filter.html' %}

{# MSG: Heading for the list of songs that have been sung the most times. #}
<h2>{% trans %}Top songs{% endtrans %}</h2>
{% if top_songs %}
<table class="rankings-table">
	<colgroup>
		<col class="col-rank" />
		<col />
		<col class="col-count" />
	</colgroup>
	{# MSG: Ranking table column header for the song that was sung. #}
	{{ ranking_head(_("Song")) }}
	<tbody>
		{% for song in top_songs %}
		<tr>
			<td>{{ loop.index }}</td>
			{# The title as recorded, so a song still counts after leaving the
			   library -- which is also why file_path can be missing, and with it
			   any way to queue the song up again. #}
			<td>
				{% if song.file_path %}
				{# A bare fontello glyph, not a Bulma .icon: this one sits inline with
				   the title, and .icon is a 1.5rem flex box that would ride above it. #}
				<a class="add-song-link has-text-success"
					title="{{ _('Add to queue') | forceescape }}"
					href="#"
					data-song="{{ url_escape(song.file_path.encode('utf-8','surrogateescape')) }}"
					><i class="icon-list-add"></i
				></a>
				{% endif %}
				{# Through to every play of this song, and so to who sang it. The id
				   goes with the title because a song downloaded twice ranks as two
				   rows: without it both would open the same combined log, agreeing
				   with neither count. #}
				<a href="{{ url_for('sessions.history', song=song.song,
					youtube_id=song.youtube_id or None,
					session=selected_session or None) }}">{{ song.song }}</a>
			</td>
			<td class="has-text-right">{{ song.play_count }}</td>
		</tr>
		{% endfor %}
	</tbody>
</table>
{{ limit_select("songs", limits.songs) }}
{% else %}
{# MSG: Shown on the rankings page when no songs have been played yet. #}
<p>{% trans %}Nothing has been played yet.{% endtrans %}</p>
{% endif %}

{# MSG: Heading for the list of people who have sung the most songs. #}
<h2>{% trans %}Top performers{% endtrans %}</h2>
{% if top_performers %}
<table class="rankings-table">
	<colgroup>
		<col class="col-rank" />
		<col />
		<col class="col-count" />
	</colgroup>
	{# MSG: Ranking table column header for the person who sang. #}
	{{ ranking_head(_("Performer")) }}
	<tbody>
		{% for performer in top_performers %}
		<tr>
			<td>{{ loop.index }}</td>
			{# Through to this person's plays. The session goes with it, so a chart
			   scoped to one night links to that night rather than to all time. #}
			<td>
				<a href="{{ url_for('sessions.history', performer=performer.performer, session=selected_session or None) }}">{{ performer.performer }}</a>
			</td>
			<td class="has-text-right">{{ performer.play_count }}</td>
		</tr>
		{% endfor %}
	</tbody>
</table>
{{ limit_select("performers", limits.performers) }}
{% else %}
{# MSG: Shown on the rankings page when nobody has sung anything yet. #}
<p>{% trans %}Nobody has sung yet.{% endtrans %}</p>
{% endif %}

{% endblock %}