{% extends 'base.html' %} {% block scripts %}
<script>
	$(function () {
		loadSingerList();

		// --- A-Z strip ----------------------------------------------------
		// On a phone the strip is fixed, so it has to be told where to sit: it
		// starts level with the top of the Songs box and rides up with the page
		// until it reaches the top of the screen. Written to a custom property
		// rather than `top` so the value only takes effect inside the mobile
		// media query -- an inline `top` would follow a resize onto the desktop
		// layout and strand the bar wherever the phone had left it.
		const alphaBar = document.getElementById("alpha-bar");
		const box = document.querySelector(".box");
		// The strip is dropped for a folder that holds only subfolders.
		if (alphaBar && box) {
			const restingTop = box.getBoundingClientRect().top + window.scrollY;
			let queued = false;
			function placeAlphaBar() {
				queued = false;
				const top = Math.max(3, restingTop - window.scrollY);
				alphaBar.style.setProperty("--alpha-top", top + "px");
			}
			// Not on load alone: a Back navigation restores the scroll position.
			placeAlphaBar();
			// Namespaced, and unbound first, because SPA navigation re-runs this
			// script on every visit and a plain bind would stack a handler per page.
			$(window)
				.off("scroll.alphabar")
				.on("scroll.alphabar", function () {
					// A phone fires scroll faster than it paints and each write
					// forces a layout, so collapse them onto the frame.
					if (queued) return;
					queued = true;
					requestAnimationFrame(placeAlphaBar);
				});
		}

		const input = document.getElementById("song-filter");
		const resultsDiv = document.getElementById("browse-results");
		// A folder holding only subfolders renders neither control.
		if (!input || !resultsDiv) return;

		// --- Filter box -------------------------------------------------
		// Hiragana/Katakana, CJK Ext A, CJK Unified, Hangul Syllables. Ranges mirror
		// _CJK in metadata_parser.py. Compared numerically rather than written as a
		// regex character class, so this file stays pure ASCII -- it is a Jinja
		// template and must not depend on its own encoding surviving a round trip.
		const CJK_RANGES = [
			[0x3040, 0x30ff],
			[0x3400, 0x4dbf],
			[0x4e00, 0x9fff],
			[0xac00, 0xd7af],
		];

		function hasCjk(text) {
			for (const ch of text) {
				const code = ch.codePointAt(0);
				if (CJK_RANGES.some((r) => code >= r[0] && code <= r[1])) return true;
			}
			return false;
		}

		const BROWSE_URL = "{{ url_for('files.browse') }}";
		const VIEW = {{ view | tojson }};
		const FOLDER = {{ folder | tojson }};

		// Filtering and sorting act *within* the folder being browsed, so every URL
		// built below has to carry the scope -- otherwise the first keystroke
		// silently throws the user back out to the whole library.
		function scopeParams() {
			const params = new URLSearchParams();
			if (VIEW) {
				params.set("view", VIEW);
				if (FOLDER) params.set("folder", FOLDER);
			}
			return params;
		}
		// What the server last rendered. A query that resolves to this needs no
		// request, which is why typing one letter on an unfiltered page is free.
		let renderedQuery = {{ q | tojson }};
		let inflight = null;

		// A single Latin character matches nearly everything -- maximum scan cost
		// for no narrowing. A single CJK character is the opposite: often a whole
		// word, and highly selective. So the gate is selectivity, not length.
		function effectiveQuery(raw) {
			return raw.length < 2 && !hasCjk(raw) ? "" : raw;
		}

		function buildParams(q) {
			const params = scopeParams();
			if (q) params.set("q", q);
			// A user who chose ?sort=date and then typed has not asked to go back
			// to alphabetical. page and letter are dropped: a new query is a new
			// result set, and q takes precedence over letter server-side anyway.
			const sort = new URLSearchParams(window.location.search).get("sort");
			if (sort) params.set("sort", sort);
			return params;
		}

		// The sort link sits outside the swapped fragment, so it is not re-rendered
		// on a keystroke and would keep pointing at the query the page loaded with --
		// switching sort would then silently drop what the user had typed.
		function syncSortLinks(q) {
			document.querySelectorAll("a.sort-link").forEach(function (a) {
				const params = scopeParams();
				if (q) params.set("q", q);
				if (a.dataset.sort) params.set("sort", a.dataset.sort);
				const query = params.toString();
				a.href = BROWSE_URL + (query ? "?" + query : "");
			});
		}

		function applyFilter() {
			const q = effectiveQuery(input.value.trim());

			// Aborting before the early return, not after it: backspacing from "ab"
			// to "a" resolves to the query already on screen, but the request for
			// "ab" is still in flight and its response would fill the table with
			// results the input no longer describes.
			if (inflight) {
				inflight.abort();
				inflight = null;
			}
			if (q === renderedQuery) return;

			// Safe to move ahead of the response: these only matter once clicked,
			// and clicking one navigates to a fresh server render of that query.
			syncSortLinks(q);

			const params = buildParams(q);
			const query = params.toString();
			const url = BROWSE_URL + (query ? "?" + query : "");

			const controller = new AbortController();
			inflight = controller;
			params.set("partial", "1");
			fetch(BROWSE_URL + "?" + params.toString(), { signal: controller.signal })
				.then((r) => {
					// An error page is still text. Without this check a 500 renders
					// itself into the results table as though it were the fragment.
					if (!r.ok) throw new Error("Filter request failed: " + r.status);
					return r.text();
				})
				.then((html) => {
					// abort() does not guarantee the promise loses the race, so the
					// identity check is what actually keeps a stale response out.
					if (inflight !== controller) return;
					inflight = null;
					resultsDiv.innerHTML = html;
					renderedQuery = q;
					// The URL is rewritten only once the table it names is on screen,
					// so an abandoned query can never be left in the address bar. It
					// carries the {path} state spa-navigation.js reads, or Back into
					// this entry falls through to a full reload -- and currentPath has
					// to move with it, or every link pointing here becomes a no-op.
					history.replaceState({ path: url }, "", url);
					if (window.spaNavigation) window.spaNavigation.setCurrentPath(url);
					// Filtering drops `letter` from the URL and from the server-side
					// query, so the heading's letter suffix is stale for good.
					if (q) $("#letter-heading").remove();
				})
				.catch((e) => {
					if (e.name === "AbortError") return;
					console.error(e);
				});
		}

		const runFilter = debounce(applyFilter, 250);

		input.addEventListener("input", function (e) {
			// With an IME, "input" fires on every intermediate romaji state.
			// Each one is a wasted round trip returning noise.
			if (e.isComposing) return;
			runFilter();
		});
		input.addEventListener("compositionend", runFilter);

		$("#clear-filter").on("click", function (e) {
			e.preventDefault();
			input.value = "";
			applyFilter();
			input.focus();
		});

		// A cookie, not the preference Settings edits, which everyone shares. Not
		// localStorage: the page is rendered server-side, and the browser sends this
		// with the pager links and filter fetches so Flask can size what it builds.
		//
		// Delegated because the dropdown rides inside the fragment a filter keystroke
		// replaces, and namespaced and unbound first because SPA navigation re-runs
		// this script on every visit.
		$(document)
			.off("change.perpage")
			.on("change.perpage", "#pager-per-page", function () {
				Cookies.set("browse_per_page", $(this).val(), {
					expires: 3650,
					path: window.pikaraokeConfig.cookiePath,
				});
				// Read from the address bar rather than the URL this page was rendered
				// with, which a filter keystroke may since have replaced. A new size
				// invalidates the offset, so this restarts at page one.
				const target = new URL(window.location.href);
				target.searchParams.set("page", "1");
				window.location.href = target.toString();
			});
	});
</script>

{% endblock %} {% block heading %}{{ title }}{% if letter %}<span id="letter-heading">: "{{ letter.upper() }}"</span>{% endif %}{% endblock %}

{% block heading_action %}
{% if admin %}
<a class="batch-edit-btn" href="{{ url_for('batch_song_renamer.browse')}}" title="Bulk rename"
	><i class="icon icon-edit"></i>{# MSG: Button to open the batch song renamer page. #} {% trans %}Bulk rename{%
	endtrans %}</a
>
{% endif %}
{% endblock %}

{% block header %}
{# MSG: Subtitle under the Songs heading, explaining that this page lists songs already downloaded. #}
<p class="subtitle is-6">{% trans %}Available in the library{% endtrans %}</p>
<style>
	#alpha-bar {
		padding: 5px 10px;
		border-radius: 4px;
		margin-bottom: 10px;
		position: sticky;
		display: flex;
		justify-content: space-between;
		top: 3px;
		z-index: 20;
	}
	/* Held in the layout rather than hidden, so the strip keeps the same 27 slots in
	   every folder. Dim enough to read as unavailable, but still legible: it is the
	   only thing telling you the folder has nothing under that letter. */
	#alpha-bar .alpha-empty {
		opacity: 0.35;
		cursor: default;
		user-select: none;
	}
	table {
		width: 100%;
		table-layout: auto; /* Allows columns to adjust based on content */
	}
	td {
		word-wrap: break-word; /* Ensures long words break to fit within the cell */
	}
	/* `anywhere`, not `break-all`: break-all splits every title mid-word. This breaks
	   a word only when it cannot fit on a line alone, and unlike the `break-word` in
	   custom.css it still lets the auto-layout column shrink below its longest word,
	   so a long unbroken filename narrows instead of overflowing on a phone. Old
	   browsers that drop `anywhere` fall back to that custom.css rule. */
	.break-word {
		overflow-wrap: anywhere;
	}

	.batch-edit-btn {
		font-size: 0.875rem;
		white-space: nowrap;
	}

	/* The view toggle sits left, the sort toggle right. The left slot is rendered
	   even when empty so that space-between keeps sort against the right edge on a
	   library with no subfolders. */
	#browse-controls {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	/* Bulma gives a non-last .buttons a full block of spacing; these controls belong
	   close to the table they act on. */
	#browse-controls .buttons {
		margin-bottom: 0.5rem;
	}

	.folder-item {
		/* Pushes the chevron to the right edge; panel-block is flex already. */
		justify-content: space-between;
	}

	/* Bulma ships the breadcrumb list as align-items: flex-start, which only shows
	   when the items are unequal heights -- here the root crumb carries a folder
	   icon and the rest are plain text, so they hang from the top instead of
	   sharing a centre line. */
	.breadcrumb ul {
		align-items: center;
	}

	@media screen and (max-width: 500px) {
		#alpha-bar {
			font-size: 13px;
			position: fixed;
			display: flex;
			align-items: center;
			/* Flush with the navbar and the box, which both stop at the container's
			   5px padding. Any further in covers song titles, page links and edit
			   icons; any further out and the blue navbar looks clipped beside it. */
			right: 5px;
			/* Set from the real .box position on load and on scroll. The fallback
			   is the same place worked out statically -- the navbar's 3.25rem plus
			   the container's 5px padding and the box's 5px margin -- so the strip
			   lands correctly on the first paint, before the script runs. Paired
			   with `bottom` rather than a height, or starting this far down would
			   push the last letters off the bottom of the screen. */
			top: var(--alpha-top, calc(3.25rem + 10px));
			bottom: 8px;
			flex-direction: column;
			max-width: 22px;
		}
		/* The strip is an overlay, so the content has to give up the width it sits
		   in. Bulma's 20px of box padding is not enough on its own: it leaves the
		   page links, the rename icons and "Bulk rename" running underneath, and
		   since the strip paints above them it swallows their taps too. */
		.box {
			padding-right: 28px;
		}
	}
</style>
{% endblock %} {% block content %}

{# A folder holding only subfolders is navigation, not a result set: no singer
   field, no filter box, no A-Z bar, no sort toggle and no empty table -- just the
   folders. An active filter keeps them all, so a query matching nothing can still
   be cleared. #}
{% set folder_landing = view and not songs and not q and not letter %}
{# The route reports the sort as a display string; the view toggle needs the param
   back so that switching between flat and folder view keeps the chosen order. #}
{% set sort_param = 'date' if sort_order == 'Date' else None %}

{% if breadcrumbs %}
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
	<ul>
		<li>
			<a href="{{ url_for('files.browse', view='folders') }}">
				{# The glyph class alone -- adding Bulma's `icon` to the inner element
				   nests a default 1.5rem icon box inside this `is-small` one and
				   knocks the folder glyph off centre. #}
				<span class="icon is-small"><i class="icon-folder-open-empty"></i></span>
				{# MSG: Breadcrumb link back to the top level of the folder view. #}
				<span>{% trans %}All folders{% endtrans %}</span>
			</a>
		</li>
		{% for crumb in breadcrumbs %}
		<li{% if loop.last %} class="is-active"{% endif %}>
			<a href="{{ url_for('files.browse', view='folders', folder=crumb.folder) }}">{{ crumb.name }}</a>
		</li>
		{% endfor %}
	</ul>
</nav>
{% endif %}

{% if not folder_landing %}
{% include 'partials/singer_field.html' %}

{# Filtering is server-side: the page is paginated, so a client-side filter over
   the ~100 rows in the DOM would silently miss songs on every other page. #}
<div class="field has-addons mb-3">
	<div class="control has-icons-left is-expanded">
		<input
			id="song-filter"
			class="input"
			type="text"
			autocomplete="off"
			value="{{ q }}"
			{# MSG: Placeholder in the box that filters the songs already on this machine. #}
			placeholder="{{ _('Search by title, artist...') }}"
		/>
		<span class="icon is-small is-left"><i class="icon icon-search-1"></i></span>
	</div>
	<div class="control">
		{# MSG: Button which empties the filter box and shows every song again. #}
		<a id="clear-filter" class="button">{% trans %}Clear{% endtrans %}</a>
	</div>
</div>

{# A folder listing only subfolders has no songs for the bar to narrow, so every
   letter would be a dead end. Everywhere else it renders, scoped to what is on
   screen -- the letters that would return nothing are greyed rather than dropped,
   so the strip does not change shape as the user moves between folders. #}
{% if not view or letters %}
<div id="alpha-bar" class="column is-full has-background-dark">
	<a href="{{ url_for('files.browse', view=view or None, folder=folder or None) }}" title="Show all"
		><i class="icon icon-list-bullet"></i
	></a>
	{% if 'numeric' in letters %}
	<a href="{{ url_for('files.browse', letter='numeric', view=view or None, folder=folder or None) }}">#</a>
	{% else %}
	<span class="alpha-empty">#</span>
	{% endif %}
	{# Not named `letter`: the sort links below read the page's own `letter` variable,
	   and shadowing it here would be one Jinja scoping rule away from a bug. #}
	{% for alpha in ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
	'u', 'v', 'w', 'x', 'y', 'z'] %}
	{% if alpha in letters %}
	<a href="{{ url_for('files.browse', letter=alpha, view=view or None, folder=folder or None) }}">{{alpha.upper()}}</a>
	{% else %}
	{# A span, not a disabled link: an anchor with no href is still focusable, so a
	   keyboard would tab through two dozen dead stops to reach the list. #}
	<span class="alpha-empty">{{alpha.upper()}}</span>
	{% endif %}
	{% endfor %}
</div>
{% endif %}
{% endif %}

{% if subfolders %}
{# Entering a folder deliberately drops q, letter and page: a folder is a new
   listing, not a filtered continuation of the one being left. #}
<div class="panel">
	{% for name in subfolders %}
	<a class="panel-block py-3 folder-item"
		href="{{ url_for('files.browse', view='folders', folder=(folder ~ '/' ~ name) if folder else name) }}">
		<span><span class="icon mr-2"><i class="icon-folder-open-empty"></i></span>{{ name }}</span>
		<span class="icon"><i class="icon-right-big"></i></span>
	</a>
	{% endfor %}
</div>
{% endif %}

{# Both toggles sit with the results they describe rather than above the search box,
   and each shows its options at once so the active one is visible without reading a
   sentence. Sorting and the view are orthogonal to filtering, so both carry the
   active query through -- the alpha bar above is the one control that clears it. #}
<div id="browse-controls">
	<div class="buttons has-addons are-small">
		{% if has_subfolders %}
		<a class="button {% if not view %}is-info is-selected{% endif %}"
			href="{{ url_for('files.browse', q=q or None, sort=sort_param) }}">
			{# MSG: Button which lists every song at once, ignoring the folders they are stored in. #}
			{% trans %}All songs{% endtrans %}
		</a>
		<a class="button {% if view %}is-info is-selected{% endif %}"
			href="{{ url_for('files.browse', view='folders', q=q or None, sort=sort_param) }}">
			{# MSG: Button which groups the songs by the folder they are stored in. #}
			{% trans %}Folders{% endtrans %}
		</a>
		{% endif %}
	</div>
	<div class="buttons has-addons are-small">
		{% if not folder_landing %}
		{# Labels stay on one line: `trans` does not collapse whitespace, so a wrapped
		   label bakes the newline and tabs into the msgid and any reindent breaks it. #}
		<a class="button sort-link {% if sort_order == 'Alphabetical' %}is-info is-selected{% endif %}" data-sort=""
			href="{{ url_for('files.browse', q=q or None, letter=letter or None, view=view or None, folder=folder or None) }}">
			{# MSG: Button which changes how the songs are sorted so they become sorted by name. #}
			{% trans %}Sort Alphabetically{% endtrans %}
		</a>
		<a class="button sort-link {% if sort_order == 'Date' %}is-info is-selected{% endif %}" data-sort="date"
			href="{{ url_for('files.browse', sort='date', q=q or None, letter=letter or None, view=view or None, folder=folder or None) }}">
			{# MSG: Button which changes how the songs are sorted so they become sorted by date. #}
			{% trans %}Sort by Date{% endtrans %}
		</a>
		{% endif %}
	</div>
</div>

{% if not folder_landing %}
{# The filter input sits outside this div, so a keystroke swap never takes the
   caret with it. #}
<div id="browse-results">{% include 'partials/browse_results.html' %}</div>
{% endif %}
{% endblock %}