{% extends "settings_layout.html" %}

{# A setting the view depends on, as a link to its control on the Settings page. #}
{% macro setting(control, label, value, tone='secondary') -%}
<a class="files-setting" href="/admin/settings#{{ control }}" title="Open this setting">
    <span class="files-setting-dot" data-tone="{{ tone }}"></span>{{ label }} <b>{{ value }}</b><i class="bi bi-gear"></i></a>
{%- endmacro %}
{% macro toggle(control, label, on) -%}
{{ setting(control, label, 'On' if on else 'Off', 'success' if on else 'secondary') }}
{%- endmacro %}
{% set verification = management.verification %}
{% set verification_on = verification.enabled and keys_valid %}
{% macro verification_setting() -%}
{% if verification.enabled and not keys_valid %}{{ setting('verifyFilesCheck', 'Verification', 'Needs keys', 'warning') }}
{% else %}{{ setting('verifyFilesCheck', 'Verification',
                     ('Full hash' if verification.depth == 'hash' else 'Signature only') if verification.enabled else 'Off',
                     'success' if verification.enabled else 'secondary') }}{% endif %}
{%- endmacro %}
{% set tiles = [('all', 'All files'), ('unidentified', 'Unidentified'), ('verification', 'Verification issues'),
                ('duplicates', 'Duplicates'), ('outdated', 'Outdated updates'), ('pending', 'Pending')] %}

{% block panel %}
<div class="settings-container container-fluid mt-3 files-page">

    <div class="task-section-head">
        <h2 class="mb-0">Files</h2>
        <button type="button" id="refreshFiles" class="icon-btn ms-auto" title="Refresh">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
    </div>
    <p class="text-secondary">Manage library files, actions run as <a href="/admin/tasks">tasks</a>.</p>

    <nav class="files-tiles" id="filesTiles">
        {% for key, label in tiles %}
        <a class="files-tile" href="#{{ key }}" data-tile="{{ key }}">
            <span class="files-tile-dot d-none"></span>
            <i class="bi bi-check-lg files-tile-ok"></i>
            <span class="files-tile-label">{{ label }}</span>
            <span class="files-tile-count">…</span>
            <span class="files-tile-sub">&nbsp;</span>
        </a>
        {% endfor %}
    </nav>

    {# Per view: what it lists, then the settings it depends on with their current values. #}
    <div class="files-status" data-tab="all">
        <p>Every file in all libraries.</p>
    </div>
    <div class="files-status" data-tab="unidentified">
        <p>Files Ownfoil could not match to any known content in the metadata database.</p>
        <div class="files-settings">
            {{ setting('consoleKeysInput', 'Console keys', 'Valid' if keys_valid else 'Missing',
                       'success' if keys_valid else 'warning') }}
        </div>
    </div>
    <div class="files-status" data-tab="verification">
        <p>Files whose signature or content hash check failed, and files not verified yet.</p>
        <div class="files-settings">
            {{ verification_setting() }}
            {% if not keys_valid %}{{ setting('consoleKeysInput', 'Console keys', 'Missing', 'warning') }}{% endif %}
        </div>
    </div>
    <div class="files-status" data-tab="duplicates">
        <p>For each content with several copies, the copy kept and why it wins over the others. Switch a group off to keep
            all its copies.</p>
        <div class="files-settings">
            {{ toggle('deleteDuplicatesCheck', 'Automatic deletion', management.deduplication.enabled) }}
            {{ setting('preferMulticontentCheck', 'Prefer bundles',
                       'Yes' if management.deduplication.prefer_multicontent else 'No') }}
        </div>
    </div>
    <div class="files-status" data-tab="outdated">
        <p>Update files older than the newest update owned for the same title. Bundles are never deleted.</p>
        <div class="files-settings">
            {{ toggle('deleteOlderUpdatesCheck', 'Automatic deletion', management.delete_older_updates) }}
        </div>
    </div>
    <div class="files-status" data-tab="pending">
        <p>Files with processing still due given the current settings.</p>
        <div class="files-settings">
            {{ toggle('organizerEnabledCheck', 'Organizer', management.organizer.enabled) }}
            {{ verification_setting() }}
            {{ toggle('compressFilesCheck', 'Compression', management.compression.enabled) }}
        </div>
    </div>

    <div class="files-toolbar">
        <div class="files-search">
            <i class="bi bi-search"></i>
            <input type="search" id="filesSearch" class="form-control form-control-sm"
                   placeholder="Title, title id or file name" aria-label="Search files">
        </div>
        <div class="files-chips" id="filesChips"></div>
        <div class="dropdown">
            <button type="button" class="icon-btn" id="filesAddFilter" data-bs-toggle="dropdown">
                <i class="bi bi-plus-lg"></i> Filter</button>
            <div class="dropdown-menu" id="filesAddMenu"></div>
        </div>
        <div class="files-pager ms-auto">
            <span class="files-count"></span>
            <button type="button" class="icon-btn files-prev" title="Previous page"><i class="bi bi-chevron-left"></i></button>
            <button type="button" class="icon-btn files-next" title="Next page"><i class="bi bi-chevron-right"></i></button>
            <button type="button" class="btn btn-sm files-btn-danger files-delete"><i class="bi bi-trash"></i> <span></span></button>
        </div>
    </div>

    <p id="filesNotice" class="small text-secondary d-none"></p>

    <div class="files-body" id="filesBody">
        <div class="files-main">
            <table class="table table-hover files-table" id="filesTable">
                <colgroup><col><col class="files-wide" style="width: 7.5rem"><col style="width: 6rem"><col class="files-wide" style="width: 6.5rem"><col style="width: 3rem"></colgroup>
                <thead></thead>
                <tbody></tbody>
            </table>
            <div class="files-groups" id="filesGroups"></div>
            <div class="files-pager mt-3" id="filesPagerBottom">
                <span class="files-count"></span>
                <button type="button" class="icon-btn files-prev" title="Previous page"><i class="bi bi-chevron-left"></i></button>
                <button type="button" class="icon-btn files-next" title="Next page"><i class="bi bi-chevron-right"></i></button>
                <button type="button" class="btn btn-sm files-btn-danger files-delete"><i class="bi bi-trash"></i> <span></span></button>
            </div>
        </div>
        <aside class="files-drawer" id="filesDrawer" hidden></aside>
    </div>

</div>
{% endblock %}

{% block panel_scripts %}
<script src="{{ url_for('static', filename='js/format.js') }}"></script>
<script>

    const VERIFY_EXT = {{ verify_ext|tojson }};
    const COMPRESS_EXT = {{ compress_ext|tojson }};
    const KEYS_VALID = {{ keys_valid|tojson }};
    const PAGE_SIZE = 100;
    const BROKEN = ['SIGNATURE_FAILED', 'MODIFIED', 'CORRUPT'];
    // Every library format can be verified, so UNVERIFIED always means not checked yet.
    const VERIFICATION_ISSUES = [...BROKEN, 'UNVERIFIED'];

    const FILE_FIELDS = `fragment F on File {
        id filename filepath folder extension size compressed organized multicontent libraryId
        identificationType identificationError identificationAttempts
        verificationStatus verificationError verifiedAt addedAt
        apps { appId appType appVersion displayVersion titleId title { name icon(size: THUMB) { url } } }
    }`;

    async function gql(query, variables, post) {
        const r = post
            ? await fetch('/api/graphql', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
                credentials: 'same-origin',
                body: JSON.stringify({query: query, variables: variables || {}}),
            })
            : await fetch('/api/graphql?' + new URLSearchParams(
                {query: query, variables: JSON.stringify(variables || {})}), {
                headers: {'Accept': 'application/json'},
                credentials: 'same-origin',
            });
        if (!r.ok) throw new Error(`GraphQL HTTP ${r.status}`);
        const body = await r.json();
        if (body.errors && body.errors.length) throw new Error(body.errors.map(e => e.message).join('; '));
        return body.data;
    }

    function el(tag, props, ...children) {
        const node = Object.assign(document.createElement(tag), props || {});
        children.flat(Infinity).forEach(c => c != null && node.append(c));
        return node;
    }

    function humanize(key) {
        const words = key.replace(/_/g, ' ').toLowerCase();
        return words.charAt(0).toUpperCase() + words.slice(1);
    }

    /** A timestamp column as a Date. SQLite hands them back as naive text: `added_at` is
     *  written in UTC, `verified_at` in local time. */
    function parseDate(text, utc) {
        if (!text) return null;
        const iso = text.replace(' ', 'T').replace(/(\.\d{3})\d+/, '$1');
        return new Date(utc && !/[zZ]|[+-]\d\d:\d\d$/.test(iso) ? iso + 'Z' : iso);
    }

    const AGO = [[60, 's'], [60, 'min'], [24, 'h'], [30, 'd'], [12, 'mo'], [Infinity, 'y']];

    function ago(date) {
        if (!date) return '';
        let n = Math.max(0, (Date.now() - date) / 1000), i = 0;
        while (n >= AGO[i][0]) n /= AGO[i++][0];
        return `${Math.floor(n)} ${AGO[i][1]} ago`;
    }

    /** "3 d ago", with the full date and time on hover. */
    function when(date) {
        return date ? el('span', {textContent: ago(date), title: date.toLocaleString()}) : null;
    }

    function muted(text) {
        return text ? el('span', {className: 'text-secondary', textContent: text}) : null;
    }

    function chip(text) {
        return el('span', {className: 'files-chip', textContent: text});
    }

    const STATUS_TONE = {VALID: 'success', REPACK: 'success', SIGNATURE_OK: 'info', UNVERIFIED: 'secondary',
                         SIGNATURE_FAILED: 'danger', MODIFIED: 'danger', CORRUPT: 'danger'};

    function pill(tone, text) {
        const node = el('span', {className: 'files-pill', textContent: text});
        node.dataset.tone = tone;
        return node;
    }

    function statusPill(status) {
        return pill(STATUS_TONE[status] || 'secondary', humanize(status));
    }

    /** The distinct titles a file carries - usually one, several for a multi-title bundle. */
    function fileTitles(r) {
        return [...new Map((r.apps || []).map(a => [a.titleId, a])).values()];
    }

    function titleName(r) {
        return fileTitles(r).map(a => (a.title && a.title.name) || a.titleId).join(', ');
    }

    function version(a) {
        return a.displayVersion || `v${a.appVersion}`;
    }

    /** The title's icon, or a placeholder: a controller for a title with no art or art that
     *  fails to load, a question mark for a file matched to nothing. */
    function avatar(apps, size) {
        const placeholder = el('div', {className: `files-avatar files-avatar-none ${size || ''}`},
                               el('i', {className: `bi ${apps && apps.length ? 'bi-controller' : 'bi-question-lg'}`}));
        const a = (apps || []).find(x => x.title && x.title.icon);
        if (!a) return placeholder;
        const img = el('img', {className: `files-avatar ${size || ''}`, src: a.title.icon.url, alt: '', loading: 'lazy'});
        img.addEventListener('error', () => img.replaceWith(placeholder));
        return img;
    }

    const APP_TYPES = {BASE: 'Base', UPDATE: 'Update', DLC: 'DLC'};

    /** What a file carries, in words: "Update 1.2.1", or each content of a bundle. A content
     *  at version 0 with no version string of its own shows none: "v0" tells nothing. */
    function contentText(r) {
        if (!r.apps || !r.apps.length) return '';
        return r.multicontent ? `Bundle: ${r.apps.map(contentLabel).join(', ')}` : contentLabel(r.apps[0]);
    }

    function contentLabel(a) {
        return [APP_TYPES[a.appType], a.displayVersion || (a.appVersion ? `v${a.appVersion}` : '')].filter(Boolean).join(' ');
    }

    const IDENTIFIED = {cnmt: ['files-fg-success', 'Identified from its CNMT'],
                        filename: ['files-fg-warning', 'Identified from its file name only']};

    /** Identified, verification, compressed, organized - always in that order. */
    function stateIcons(r) {
        const icon = (name, tone, tip) => el('i', {className: `bi ${name} ${tone}`, title: tip});
        const [idTone, idTip] = IDENTIFIED[r.identificationType] || ['files-fg-danger', 'Not identified'];
        const status = r.verificationStatus;
        const shield = status === 'UNVERIFIED' ? ['bi-shield', 'files-off']
            : [BROKEN.includes(status) ? 'bi-shield-exclamation' : 'bi-shield-check', `files-fg-${STATUS_TONE[status]}`];
        return el('span', {className: 'files-state'},
            icon('bi-tag-fill', idTone, idTip),
            icon(shield[0], shield[1], `Verification: ${humanize(status)}`),
            icon('bi-file-earmark-zip', r.compressed ? 'files-fg-primary' : 'files-off', r.compressed ? 'Compressed' : 'Not compressed'),
            icon(r.organized ? 'bi-folder-check' : 'bi-folder', r.organized ? 'files-fg-primary' : 'files-off',
                 r.organized ? 'Organized' : 'Not organized'));
    }

    // Same rule as FileFilter.title: shorter text is never read as part of an id, whose hex
    // digits would put nearly every title behind a single letter.
    const ID_FRAGMENT = /^[0-9a-f]{4,}$/i;

    /** Titles in the library whose name - or, for enough hex digits, id - holds what is
     *  typed, as (name, id) suggestions: name matches first, then id matches. */
    async function suggestTitles(text) {
        const byId = ID_FRAGMENT.test(text);
        const d = await gql(`query ($text: String, $byId: Boolean!) {
            byName: titles(owned: true, filter: {name: {contains: $text}}, orderBy: {field: NAME}, pageSize: 10) {
                items { titleId name } }
            byId: titles(owned: true, filter: {titleId: {contains: $text}}, orderBy: {field: NAME}, pageSize: 10)
                @include(if: $byId) { items { titleId name } } }`, {text: text, byId: byId});
        const titles = [...d.byName.items, ...(d.byId ? d.byId.items : [])];
        const unique = [...new Map(titles.map(t => [t.titleId, t])).values()].slice(0, 10);
        return unique.map(t => [t.name || t.titleId, t.titleId]);
    }

    let options = {extension: [], status: [], library: []};
    const YES_NO = [['true', 'Yes'], ['false', 'No']];

    // A filter's value is the list of ticked choices, any of which matches. `gql` turns it
    // into a FileFilter for the paged views, `match` tests a row for the computed ones;
    // `field` names the FileFilter list a view's own base may already set (Verification's).
    const FILTERS = {
        content: {label: 'Content',
                  choices: () => [['BASE', 'Base'], ['UPDATE', 'Update'], ['DLC', 'DLC'], ['multi', 'Bundle']],
                  gql: v => {
                      const types = v.filter(x => x !== 'multi');
                      const branches = [...(types.length ? [{appType: types}] : []),
                                        ...(v.includes('multi') ? [{multicontent: true}] : [])];
                      return branches.length > 1 ? {anyOf: branches} : branches[0];
                  },
                  match: (r, v) => (r.apps || []).some(a => v.includes(a.appType)) || (v.includes('multi') && r.multicontent)},
        ext: {label: 'Format', choices: () => options.extension,
              gql: v => ({extension: {in: v}}), match: (r, v) => v.includes(r.extension)},
        status: {label: 'Verification', field: 'verificationStatus', choices: () => options.status,
                 gql: v => ({verificationStatus: v}), match: (r, v) => v.includes(r.verificationStatus)},
        identifiedBy: {label: 'Identified by',
                       choices: () => [['cnmt', 'CNMT'], ['filename', 'File name']],
                       gql: v => ({identificationType: {in: v}}), match: (r, v) => v.includes(r.identificationType)},
        compressed: {label: 'Compressed', single: true, choices: () => YES_NO,
                     gql: v => ({compressed: v[0] === 'true'}), match: (r, v) => String(r.compressed) === v[0]},
        organized: {label: 'Organized', single: true, choices: () => YES_NO,
                    gql: v => ({organized: v[0] === 'true'}), match: (r, v) => String(r.organized) === v[0]},
        library: {label: 'Library', choices: () => options.library.length > 1 ? options.library : [],
                  gql: v => ({libraryId: {in: v.map(Number)}}), match: (r, v) => v.includes(String(r.libraryId))},
    };

    const TABS = {
        all: {kind: 'files', base: {}},
        unidentified: {kind: 'files', base: {identified: false},
                       detail: r => `${r.identificationError || 'No match'} · ${r.identificationAttempts} attempt(s)`},
        verification: {kind: 'files', base: {verificationStatus: VERIFICATION_ISSUES},
                       detail: r => r.verificationError
                           || (r.verificationStatus === 'UNVERIFIED' ? 'Not verified yet' : humanize(r.verificationStatus))},
        duplicates: {kind: 'groups', field: 'duplicates', mutation: 'removeDuplicates'},
        outdated: {kind: 'groups', field: 'outdatedUpdates', mutation: 'removeOutdatedUpdates'},
        pending: {kind: 'pending', detail: r => r._stages.join(' · ')},
    };
    Object.values(TABS).forEach(t => Object.assign(t, {
        filters: {}, chips: [], search: '', page: 1, rows: null, skipped: new Set(),
        order: t.kind === 'files' ? {field: 'TITLE', direction: 'ASC'} : null}));

    let current = 'all';

    // --- actions ---

    function notice(text) {
        $('#filesNotice').text(text).toggleClass('d-none', !text);
    }

    // --- tasks started from this page ---
    //
    // Polled rather than followed on the realtime feed: that feed covers the oldest 200
    // tasks, so an action queued behind a library scan would never be seen to finish.
    // A task that succeeded deletes itself, so a missing task is a finished one.

    const watched = new Map();  // task id -> {files: Set of file ids, text}
    const WATCH_MS = 2000;
    let watchTimer = null;

    /** The label of the task holding a file, if one is. */
    function busy(fileId) {
        for (const w of watched.values()) if (w.files.has(fileId)) return w.text;
        return null;
    }

    /** Grey out what shows a file a watched task is working on, and only that. */
    function paintBusy() {
        document.querySelectorAll('#filesBody [data-id]').forEach(node => {
            const text = busy(node.dataset.id);
            node.classList.toggle('files-busy', Boolean(text));
            node.title = text || '';
            node.querySelectorAll('button[data-action]').forEach(b => {
                b.disabled = Boolean(text) || b.dataset.blocked === '1';
            });
        });
        const removals = [...removalSet().keys()];
        $('.files-delete').prop('disabled', !removals.length || removals.some(busy));
    }

    function watch(task, fileIds, text) {
        watched.set(task.id, {files: new Set(fileIds), text: text});
        paintBusy();
        if (!watchTimer) watchTimer = setInterval(checkWatched, WATCH_MS);
    }

    async function checkWatched() {
        const ids = [...watched.keys()];
        if (!ids.length) { clearInterval(watchTimer); watchTimer = null; return; }
        let d;
        try {
            d = await gql(`query (${ids.map((_, i) => `$t${i}: ID!`).join(', ')}) {
                ${ids.map((_, i) => `t${i}: task(id: $t${i}) { status errorMessage }`).join(' ')} }`,
                Object.fromEntries(ids.map((id, i) => [`t${i}`, id])));
        } catch (e) { return; }
        const failures = [];
        ids.forEach((id, i) => {
            const t = d[`t${i}`];
            if (t && !['COMPLETED', 'FAILED'].includes(t.status)) return;
            if (t && t.status === 'FAILED') failures.push(`${watched.get(id).text} failed: ${t.errorMessage || 'see the Tasks page'}`);
            watched.delete(id);
        });
        if (ids.length === watched.size) return;
        // What finished changed the files: every view's rows are stale, the current one reloads.
        Object.entries(TABS).forEach(([name, tab]) => { if (name !== current) tab.rows = null; });
        loadStats();
        await loadTab(true);
        if (drawerId) openDrawer({id: drawerId});
        if (failures.length) notice(failures.join(' '));
    }

    async function act(mutation, f, text) {
        try {
            const d = await gql(`mutation ($id: ID!) { ${mutation}(fileId: $id) { id } }`, {id: f.id}, true);
            watch(d[mutation], [f.id], text);
        } catch (e) { notice(e.message); }
    }

    /** Apps this file is the only copy of, so deleting it would lose them. */
    async function soleCopyOf(f) {
        const d = await gql('query ($id: ID!) { file(id: $id) { apps { id } } }', {id: f.id});
        const ids = d.file ? d.file.apps.map(a => a.id) : [];
        if (!ids.length) return [];
        const vars = ids.map((_, i) => `$a${i}: ID!`).join(', ');
        const fields = ids.map((_, i) =>
            `a${i}: app(id: $a${i}) { appId appType appVersion displayVersion titleId title { name } files { id } }`).join(' ');
        const apps = await gql(`query (${vars}) { ${fields} }`,
                               Object.fromEntries(ids.map((id, i) => [`a${i}`, id])));
        return Object.values(apps).filter(a => a && a.files && a.files.length === 1);
    }

    function appLabel(a) {
        return `${(a.title && a.title.name) || a.titleId} · ${a.appType} ${version(a)}`;
    }

    async function deleteFile(f) {
        try {
            const sole = await soleCopyOf(f);
            let message = `Delete ${f.filename} from disk?`;
            if (sole.length) message += '\n\nIt is the only copy of:\n' + sole.map(appLabel).join('\n');
            if (!confirm(message)) return;
            const d = await gql('mutation ($file: FileRefInput!) { deleteFile(file: $file) { id } }',
                                {file: {id: f.id, filepath: f.filepath}}, true);
            watch(d.deleteFile, [f.id], 'Deleting');
        } catch (e) { notice(e.message); }
    }

    // Offered whatever the settings say: an action asked for by hand runs even with the
    // matching automatic step off. `blocked` explains an action that cannot run at all.
    const ACTIONS = {
        retry: {icon: 'bi-arrow-repeat', title: 'Identify again', run: f => act('retryIdentification', f, 'Identifying')},
        verify: {icon: 'bi-shield-check', title: 'Verify', run: f => act('verifyFile', f, 'Verifying'),
                 applies: f => VERIFY_EXT.includes(f.extension),
                 blocked: () => !KEYS_VALID && 'Verification needs console keys'},
        compress: {icon: 'bi-file-earmark-zip', title: 'Compress', run: f => act('compressFile', f, 'Compressing'),
                   applies: f => !f.compressed && COMPRESS_EXT.includes(f.extension)},
        decompress: {icon: 'bi-file-earmark-arrow-up', title: 'Decompress', run: f => act('decompressFile', f, 'Decompressing'),
                     applies: f => f.compressed},
        delete: {icon: 'bi-trash', title: 'Delete file', danger: true, run: deleteFile},
    };

    /** The actions that apply to a file, as buttons of the given class. */
    function actionButtons(f, className, label) {
        return Object.entries(ACTIONS).filter(([, a]) => !a.applies || a.applies(f)).map(([name, a]) => {
            const blocked = a.blocked && a.blocked();
            const b = el('button', {type: 'button', className: className + (a.danger ? ' files-fg-danger' : ''),
                                    title: blocked || '', disabled: Boolean(blocked)},
                         el('i', {className: `bi ${a.icon} ${label ? 'me-2' : ''}`}), label ? a.title : null);
            b.dataset.action = name;
            if (blocked) b.dataset.blocked = '1';
            if (!label) b.title = blocked || a.title;
            b.addEventListener('click', e => { e.stopPropagation(); a.run(f); });
            return b;
        });
    }

    function rowMenu(f) {
        const toggle = el('button', {type: 'button', className: 'icon-btn px-1', title: 'Actions'},
                          el('i', {className: 'bi bi-three-dots'}));
        toggle.dataset.bsToggle = 'dropdown';
        // Fixed, so the clipping table cell does not cut the open menu.
        toggle.dataset.bsPopperConfig = '{"strategy": "fixed"}';
        const menu = el('div', {className: 'dropdown'}, toggle,
                        el('div', {className: 'dropdown-menu dropdown-menu-end'}, actionButtons(f, 'dropdown-item', true)));
        menu.addEventListener('click', e => e.stopPropagation());
        return menu;
    }

    // --- cleanup groups ---

    /** A group's copies, kept first. */
    function groupFiles(g) {
        return [...g.keep.map(f => ({file: f, keep: true})), ...g.remove.map(r => ({file: r.file, reason: r.reason}))];
    }

    function visibleGroups(tab) {
        return (tab.rows || []).filter(g => groupFiles(g).some(c => matches(c.file, tab)));
    }

    /** The files Delete sends: removals of the groups shown and switched on. A bundle listed
     *  in a switched-off group too stays - switching a group off keeps its copies. */
    function removalSet() {
        const tab = TABS[current];
        const files = new Map();
        if (tab.kind !== 'groups') return files;
        const kept = new Set((tab.rows || []).filter(g => tab.skipped.has(g.app.id))
                                             .flatMap(g => g.remove.map(r => r.file.id)));
        visibleGroups(tab).filter(g => !tab.skipped.has(g.app.id)).forEach(g => g.remove.forEach(r => {
            if (!kept.has(r.file.id)) files.set(r.file.id, r.file);
        }));
        return files;
    }

    async function runRemoval() {
        const tab = TABS[current];
        const files = removalSet();
        const size = [...files.values()].reduce((sum, f) => sum + (f.size || 0), 0);
        if (!files.size || !confirm(`Delete ${files.size} file(s) from disk, freeing ${formatBytes(size)}?`)) return;
        try {
            const d = await gql(`mutation ($files: [FileRefInput!]!) { ${tab.mutation}(files: $files) { id } }`,
                                {files: [...files.values()].map(f => ({id: f.id, filepath: f.filepath}))}, true);
            watch(d[tab.mutation], [...files.keys()], 'Deleting');
            notice('Queued: files still judged the same when the task runs are deleted.');
        } catch (e) { notice(e.message); }
    }

    const REASONS = {
        BROKEN: ['verification', 'Failed verification'], BUNDLE: ['bundle', 'Bundle preference'],
        IDENTIFICATION: ['identifiedBy', 'Identified from its file name'], VERIFICATION: ['verification', 'Worse verification'],
        COMPRESSED: ['compressed', 'Not compressed'], ORGANIZED: ['organized', 'Not organized'],
        ADDED: ['added', 'Added later'], ORDER: [null, 'Identical, tracked later'], OLDER_VERSION: ['version', 'Older version'],
    };

    const yesNo = v => v ? 'Yes' : 'No';

    /** The rows of a comparison: (key, label, cell, value compared). File and size always
     *  show; the others only where the copies differ, or where a copy lost on them. */
    function attributes(g) {
        const own = f => (f.apps || []).find(a => a.titleId === g.app.titleId && a.appType === g.app.appType) || (f.apps || [])[0];
        return [
            ['file', 'File', f => el('span', {className: 'files-cmp-name'}, f.folder ? muted(f.folder + '/') : null, f.filename), f => f.id],
            ['version', 'Version', f => own(f) ? version(own(f)) : '', f => own(f) && own(f).appVersion],
            ['bundle', 'Bundle', f => f.multicontent ? `Yes, ${f.apps.length} contents` : 'No', f => f.multicontent],
            ['identifiedBy', 'Identified by', f => f.identificationType || '', f => f.identificationType],
            ['verification', 'Verification', f => statusPill(f.verificationStatus), f => f.verificationStatus],
            ['compressed', 'Compressed', f => yesNo(f.compressed), f => f.compressed],
            ['organized', 'Organized', f => yesNo(f.organized), f => f.organized],
            ['added', 'Added', f => when(parseDate(f.addedAt, true)), f => f.addedAt],
            ['size', 'Size', f => formatBytes(f.size), f => f.size],
        ];
    }

    function groupBlock(g, tab) {
        const copies = groupFiles(g);
        const on = !tab.skipped.has(g.app.id);
        const free = g.remove.reduce((sum, r) => sum + (r.file.size || 0), 0);
        const decides = copies.map(c => c.reason && REASONS[c.reason][0]);
        const toggle = el('input', {type: 'checkbox', className: 'form-check-input', role: 'switch', checked: on,
                                    title: on ? 'Delete this group\'s copies' : 'Keep all this group\'s copies'});
        toggle.addEventListener('change', () => {
            if (toggle.checked) tab.skipped.delete(g.app.id); else tab.skipped.add(g.app.id);
            renderBody();
        });
        const head = el('div', {className: 'files-cmp-head'}, avatar([g.app], 'sm'),
            el('b', {textContent: (g.app.title && g.app.title.name) || g.app.titleId}),
            chip(g.app.appType), muted(version(g.app)),
            el('span', {className: 'files-cmp-free', textContent: `${formatBytes(free)} to free`}),
            el('div', {className: 'form-check form-switch m-0'}, toggle));
        const columns = copies.map(c => {
            const th = el('th', {scope: 'col'}, el('div', {className: 'd-flex align-items-center gap-2'},
                c.keep ? pill('success', 'Keep') : pill('danger', 'Delete'),
                c.reason ? muted(REASONS[c.reason][1]) : null,
                el('span', {className: 'ms-auto'}, rowMenu(c.file))));
            th.dataset.id = c.file.id;
            return th;
        });
        const rows = attributes(g).filter(([key, , , value]) => ['file', 'size'].includes(key)
            || new Set(copies.map(c => String(value(c.file)))).size > 1 || decides.includes(key))
            .map(([key, label, cell]) => el('tr', null, el('th', {scope: 'row', textContent: label}),
                copies.map((c, i) => {
                    const td = el('td', {className: decides[i] === key ? 'files-decides' : ''}, cell(c.file));
                    td.dataset.id = c.file.id;
                    if (key === 'file') td.addEventListener('click', () => openDrawer(c.file));
                    return td;
                })));
        return el('section', {className: on ? '' : 'files-cmp-off'}, head,
            el('div', {className: 'table-responsive'}, el('table', {className: 'files-cmp'},
                el('thead', null, el('tr', null, el('th', {scope: 'col'}), columns)), el('tbody', null, rows))));
    }

    // --- loading ---

    async function loadOptions() {
        const d = await gql(`{ stats { filesByExtension { key } filesByVerificationStatus { status } } libraries { id path } }`);
        options = {
            extension: d.stats.filesByExtension.filter(b => b.key).map(b => [b.key, b.key]),
            status: d.stats.filesByVerificationStatus.map(b => [b.status, humanize(b.status)]),
            library: d.libraries.map(l => [String(l.id), l.path]),
        };
    }

    // --- tiles ---

    // The cheap figures come with the table; the costly ones rank every copy or check every
    // file against the settings, so they arrive on their own and their tiles wait for them.
    const CHEAP_STATS = `{ stats { totalFiles totalSize unidentifiedFiles filesByVerificationStatus { status count } } }`;
    const COSTLY_STATS = `{ stats { duplicates { files size } outdatedUpdates { files size } pendingFiles } }`;
    let stats = {};

    // tile -> stats -> [count, subtitle, tone when there is something], or null while unknown.
    const TILES = {
        all: s => s.totalFiles != null && [s.totalFiles, formatBytes(s.totalSize)],
        unidentified: s => s.unidentifiedFiles != null && [s.unidentifiedFiles, 'Unknown content', 'warning'],
        // A failure outranks a file not checked yet: red if anything failed, yellow otherwise.
        verification: s => {
            if (!s.filesByVerificationStatus) return null;
            const issues = s.filesByVerificationStatus.filter(b => VERIFICATION_ISSUES.includes(b.status) && b.count);
            return [issues.reduce((n, b) => n + b.count, 0),
                    issues.map(b => `${b.count} ${humanize(b.status).toLowerCase()}`).join(' · ') || 'All verified',
                    issues.some(b => BROKEN.includes(b.status)) ? 'danger' : 'warning'];
        },
        duplicates: s => s.duplicates && [s.duplicates.files, `${formatBytes(s.duplicates.size)} to free`, 'warning'],
        outdated: s => s.outdatedUpdates && [s.outdatedUpdates.files, `${formatBytes(s.outdatedUpdates.size)} to free`, 'warning'],
        pending: s => s.pendingFiles != null && [s.pendingFiles, 'Processing due', 'info'],
    };

    function paintTiles() {
        document.querySelectorAll('.files-tile').forEach(tile => {
            const key = tile.dataset.tile;
            tile.classList.toggle('active', key === current);
            const figures = TILES[key](stats);
            if (!figures) return;
            const [count, sub, tone] = figures;
            const alert = tone && count > 0;
            tile.querySelector('.files-tile-count').textContent = count.toLocaleString();
            tile.classList.toggle('ok', Boolean(tone) && !count);
            tile.querySelector('.files-tile-sub').textContent = sub;
            const dot = tile.querySelector('.files-tile-dot');
            dot.classList.toggle('d-none', !alert);
            dot.style.background = alert ? `var(--files-${tone})` : '';
        });
    }

    function loadStats() {
        [CHEAP_STATS, COSTLY_STATS].forEach(q => gql(q)
            .then(d => { stats = {...stats, ...d.stats}; paintTiles(); })
            .catch(e => notice(e.message)));
    }

    // --- filters ---

    function serverFilter(tab) {
        const filter = {...tab.base};
        const ors = [];
        // A filter on a field the view's base already lists narrows that list.
        Object.entries(tab.filters).forEach(([key, v]) => Object.entries(FILTERS[key].gql(v)).forEach(([field, clause]) => {
            if (field === 'anyOf') ors.push(clause);
            else filter[field] = Array.isArray(filter[field]) ? filter[field].filter(x => clause.includes(x)) : clause;
        }));
        if (tab.search) ors.push([{filename: {contains: tab.search}}, {title: tab.search}]);
        // FileFilter has one anyOf, so the ORs are multiplied out into it. Their branches
        // set different fields, which is what lets them merge.
        if (ors.length) filter.anyOf = ors.reduce((acc, branches) => acc.flatMap(a => branches.map(b => ({...a, ...b}))), [{}]);
        return filter;
    }

    function matches(r, tab) {
        const text = [r.filename, ...(r.apps || []).flatMap(a => [a.titleId, a.title && a.title.name])]
            .filter(Boolean).join(' ').toLowerCase();
        return (!tab.search || text.includes(tab.search.toLowerCase()))
            && Object.entries(tab.filters).every(([key, v]) => FILTERS[key].match(r, v));
    }

    /** A filter's choices, less those the view's own base constraint already rules out:
     *  ticking one of those would intersect to an empty list, which reads as no constraint. */
    function choicesFor(key) {
        const limit = FILTERS[key].field && (TABS[current].base || {})[FILTERS[key].field];
        return FILTERS[key].choices().filter(([v]) => !limit || limit.includes(v));
    }

    function setFilter(key, value) {
        const tab = TABS[current];
        if (!value.length) delete tab.filters[key];
        else tab.filters[key] = value;
        tab.page = 1;
        if (tab.kind === 'files') loadTab(true); else renderBody();
    }

    /** A filter as a chip: its menu of choices opens from the chip, the cross drops it. */
    function filterChip(key) {
        const tab = TABS[current];
        const F = FILTERS[key];
        const chosen = new Set(tab.filters[key] || []);
        const choices = choicesFor(key);
        const toggle = el('button', {type: 'button'});
        toggle.dataset.bsToggle = 'dropdown';
        toggle.dataset.bsAutoClose = 'outside';
        const paint = () => {
            const names = choices.filter(([v]) => chosen.has(v)).map(([, text]) => text);
            toggle.replaceChildren(`${F.label}: `, el('b', {textContent: names.join(', ') || 'any'}));
        };
        const menu = el('div', {className: 'dropdown-menu'}, choices.map(([v, text]) => {
            const box = el('input', {type: F.single ? 'radio' : 'checkbox', name: `filesFilter-${key}`,
                                     className: 'form-check-input me-2', checked: chosen.has(v)});
            box.addEventListener('change', () => {
                if (F.single) chosen.clear();
                if (box.checked) chosen.add(v); else chosen.delete(v);
                paint();
                setFilter(key, [...chosen]);
            });
            return el('label', {className: 'dropdown-item'}, box, text);
        }));
        const remove = el('button', {type: 'button', title: 'Remove filter'}, el('i', {className: 'bi bi-x'}));
        remove.addEventListener('click', () => {
            tab.chips = tab.chips.filter(k => k !== key);
            renderChips();
            setFilter(key, []);
        });
        paint();
        const node = el('div', {className: 'dropdown files-filter-chip'}, toggle, menu, remove);
        node.dataset.key = key;
        return node;
    }

    function renderChips() {
        const tab = TABS[current];
        document.getElementById('filesChips').replaceChildren(...tab.chips.map(filterChip));
        const free = Object.keys(FILTERS).filter(k => !tab.chips.includes(k) && choicesFor(k).length);
        document.getElementById('filesAddMenu').replaceChildren(...free.map(key => {
            const item = el('button', {type: 'button', className: 'dropdown-item', textContent: FILTERS[key].label});
            item.addEventListener('click', () => {
                tab.chips.push(key);
                renderChips();
                const toggle = document.querySelector(`.files-filter-chip[data-key="${key}"] [data-bs-toggle]`);
                // After this click's own dropdown handling, or it closes the menu at once.
                setTimeout(() => bootstrap.Dropdown.getOrCreateInstance(toggle).show());
            });
            return item;
        }));
        $('#filesAddFilter').prop('disabled', !free.length);
        $('#filesSearch').val(tab.search);
    }

    // --- rows ---

    async function fetchRows(tab) {
        if (tab.kind === 'files') {
            const d = await gql(`query ($filter: FileFilter, $orderBy: OrderBy, $page: Int!) {
                files(filter: $filter, orderBy: $orderBy, page: $page, pageSize: ${PAGE_SIZE}) {
                    total items { ...F } } } ${FILE_FIELDS}`,
                {filter: serverFilter(tab), orderBy: tab.order, page: tab.page});
            tab.total = d.files.total;
            return d.files.items;
        }
        if (tab.kind === 'groups') {
            const d = await gql(`{ ${tab.field} {
                app { id appId appType appVersion displayVersion titleId title { name icon(size: THUMB) { url } } }
                keep { ...F } remove { reason file { ...F } } } } ${FILE_FIELDS}`);
            return d[tab.field];
        }
        const d = await gql(`{ pendingFiles { total items { stages file { ...F } } } } ${FILE_FIELDS}`);
        tab.total = d.pendingFiles.total;
        return d.pendingFiles.items.map(p => ({...p.file, _stages: p.stages}));
    }

    function visibleRows() {
        const tab = TABS[current];
        if (tab.kind === 'files') return tab.rows || [];
        return (tab.rows || []).filter(r => matches(r, tab));
    }

    /** Fetch the current view's rows and repaint the body only, so the search keeps focus. */
    async function loadTab(force) {
        const tab = TABS[current];
        renderBody();
        if (tab.rows && !force) return;
        const button = $('#refreshFiles').prop('disabled', true);
        try {
            tab.rows = await fetchRows(tab);
            notice('');
        } catch (e) {
            notice(e.message);
        } finally {
            button.prop('disabled', false);
        }
        renderBody();
    }

    // `files-wide` columns give way to the title on a phone; the drawer shows them all.
    const COLUMNS = [['Title', 'TITLE'], ['State', null, 'files-wide'], ['Size', 'SIZE', 'text-end'],
                     ['Added', 'ADDED_AT', 'text-end files-wide'], ['']];

    function renderHead() {
        const tab = TABS[current];
        document.querySelector('#filesTable thead').replaceChildren(el('tr', null, COLUMNS.map(([label, sort, cls]) => {
            const sorting = tab.kind === 'files' && sort;
            const active = sorting && tab.order && tab.order.field === sort;
            const th = el('th', {className: cls || ''}, label,
                          active ? [' ', el('i', {className: `bi bi-caret-${tab.order.direction === 'ASC' ? 'up' : 'down'}-fill`})] : null);
            if (sorting) {
                th.classList.add('files-sortable');
                th.addEventListener('click', () => {
                    tab.order = {field: sort, direction: active && tab.order.direction === 'ASC' ? 'DESC' : 'ASC'};
                    tab.page = 1;
                    renderHead();
                    loadTab(true);
                });
            }
            return th;
        })));
    }

    /** Title, then what the file carries, then the file name - or what the view is about. */
    function fileRow(r, tab) {
        const titled = r.apps && r.apps.length;
        const sub = tab.detail ? tab.detail(r) : titled ? r.filename : null;
        const line = (className, text) => text ? el('div', {className: className, textContent: text, title: text}) : null;
        const tr = el('tr', {className: r.id === drawerId ? 'files-selected' : ''},
            el('td', null, el('div', {className: 'files-row'}, avatar(r.apps),
                el('div', {className: 'files-row-lines'},
                    line('files-row-title', titled ? titleName(r) : r.filename),
                    line('files-row-content', contentText(r)),
                    line('files-row-sub', sub)))),
            el('td', {className: 'files-wide'}, stateIcons(r)),
            el('td', {className: 'text-end files-num'}, formatBytes(r.size)),
            el('td', {className: 'text-end files-num text-secondary files-wide'}, when(parseDate(r.addedAt, true))),
            el('td', {className: 'text-end'}, rowMenu(r)));
        tr.dataset.id = r.id;
        tr.addEventListener('click', () => openDrawer(r));
        return tr;
    }

    function message(text) {
        return el('tr', null, el('td', {colSpan: COLUMNS.length, className: 'text-secondary fst-italic', textContent: text}));
    }

    // What an empty view says: the problem views read an empty list as good news.
    const EMPTY = {unidentified: 'Every file is identified.', verification: 'Every file is verified and passed.',
                   duplicates: 'No duplicates.', outdated: 'No outdated updates.', pending: 'Nothing left to process.'};

    function renderBody() {
        const tab = TABS[current];
        const groups = tab.kind === 'groups';
        const filtered = Object.keys(tab.filters).length || tab.search;
        const empty = filtered ? 'No file matches these filters.' : EMPTY[current] || 'No files.';
        $('#filesTable').toggleClass('d-none', groups);
        if (groups) {
            const shown = visibleGroups(tab);
            document.getElementById('filesGroups').replaceChildren(
                ...(tab.rows === null ? [muted('Loading…')] : shown.length ? shown.map(g => groupBlock(g, tab)) : [muted(empty)]));
        } else {
            document.getElementById('filesGroups').replaceChildren();
            const rows = visibleRows();
            document.querySelector('#filesTable tbody').replaceChildren(
                ...(tab.rows === null ? [message('Loading…')] : rows.length ? rows.map(r => fileRow(r, tab)) : [message(empty)]));
        }
        paintBusy();
        renderPager();
    }

    function renderPager() {
        const tab = TABS[current];
        let text = '';
        if (tab.rows !== null && tab.kind === 'files' && tab.total) {
            const first = (tab.page - 1) * PAGE_SIZE + 1;
            text = `${first.toLocaleString()}–${(first + tab.rows.length - 1).toLocaleString()} of ${tab.total.toLocaleString()}`;
        } else if (tab.rows !== null && tab.kind === 'pending') {
            text = `${visibleRows().length.toLocaleString()} shown of ${tab.total.toLocaleString()} with processing due`;
        }
        const files = removalSet();
        if (tab.rows !== null && tab.kind === 'groups') {
            const size = [...files.values()].reduce((sum, f) => sum + (f.size || 0), 0);
            text = `${files.size.toLocaleString()} file(s) to delete, freeing ${formatBytes(size)}`;
        }
        $('.files-count').text(text);
        const paged = tab.kind === 'files' && tab.rows !== null;
        $('.files-prev').toggleClass('d-none', !paged).prop('disabled', tab.page <= 1);
        $('.files-next').toggleClass('d-none', !paged).prop('disabled', tab.page * PAGE_SIZE >= (tab.total || 0));
        $('.files-delete').toggleClass('d-none', tab.kind !== 'groups').find('span')
            .text(files.size ? `Delete ${files.size.toLocaleString()} file(s)` : 'Delete');
    }

    // --- drawer ---

    const DETAIL = `query ($id: ID!) { file(id: $id) { ...F mtime downloadCount signatureValid hashValid hashModified
        library { path } } } ${FILE_FIELDS}`;
    let drawerId = null;

    /** Show a file's details: at once from what the row holds, then in full. */
    async function openDrawer(f) {
        drawerId = f.id;
        document.querySelectorAll('#filesTable tbody tr').forEach(tr =>
            tr.classList.toggle('files-selected', tr.dataset.id === f.id));
        if (f.filename) renderDrawer(f);
        try {
            const d = await gql(DETAIL, {id: f.id});
            if (drawerId !== f.id) return;
            if (!d.file) return closeDrawer();
            renderDrawer(d.file);
        } catch (e) { notice(e.message); }
    }

    function closeDrawer() {
        drawerId = null;
        document.getElementById('filesDrawer').hidden = true;
        document.querySelectorAll('.files-selected').forEach(tr => tr.classList.remove('files-selected'));
    }

    /** Pass, fail, or not checked - what a null verdict column means. */
    function verdict(label, value, bad) {
        const text = value == null ? muted('Not checked')
            : el('span', {className: value === bad ? 'files-fg-danger' : 'files-fg-success', textContent: value === bad ? 'Fail' : 'Pass'});
        return el('div', null, muted(label), el('b', null, text));
    }

    function section(title, ...children) {
        return el('section', null, el('h6', {textContent: title}), children);
    }

    function titleLink(titleId, content, className) {
        return el('a', {href: `/title/${titleId}`, className: `files-title-link ${className || ''}`}, content);
    }

    /** The file's path, its library root muted - known once the full details have loaded. */
    function pathParts(f) {
        const root = f.library && f.filepath.startsWith(f.library.path) ? f.library.path : null;
        return root ? [muted(root), f.filepath.slice(root.length)] : f.filepath;
    }

    function renderDrawer(f) {
        const drawer = document.getElementById('filesDrawer');
        const close = el('button', {type: 'button', className: 'icon-btn ms-auto', title: 'Close'}, el('i', {className: 'bi bi-x-lg'}));
        close.addEventListener('click', closeDrawer);
        const titles = fileTitles(f);
        // Inline, not flex: the parts then share one baseline whatever their font.
        const bullet = () => muted(' · ');
        const contents = f.apps && f.apps.length
            ? f.apps.map(a => el('div', {className: 'mb-1'}, APP_TYPES[a.appType], bullet(), version(a), bullet(),
                el('span', {className: 'files-app-id', textContent: a.appId})))
            : [muted(`${f.identificationError || 'Not matched to any content'}. ${f.identificationAttempts} attempt(s).`)];
        const verified = parseDate(f.verifiedAt, false);
        drawer.replaceChildren(
            el('div', {className: 'files-drawer-head'}, titles.length ? titleLink(titles[0].titleId, avatar(f.apps, 'lg')) : avatar(f.apps, 'lg'),
                el('div', null,
                    titles.length ? titleLink(titles[0].titleId, el('div', {className: 'fw-semibold', textContent: titleName(f)}))
                        : el('div', {className: 'fw-semibold', textContent: f.filename}),
                    el('div', {className: 'small font-monospace'}, titles.map((a, i) =>
                        [i ? muted(', ') : null, titleLink(a.titleId, a.titleId, 'text-secondary')]))),
                close),
            el('div', {className: 'files-drawer-actions'}, actionButtons(f, 'btn btn-sm bg-body-tertiary border-0', true)),
            section('Contents', contents),
            section('Verification', statusPill(f.verificationStatus),
                f.signatureValid === undefined ? null : el('div', {className: 'files-verdicts'},
                    verdict('Signature', f.signatureValid, false), verdict('Content hash', f.hashValid, false),
                    el('div', null, muted('Modified'), el('b', null, f.hashModified == null ? muted('No') : yesNo(f.hashModified)))),
                // nstools' failing lines, joined with "; ", each starting with ">": one per line.
                f.verificationError ? el('div', {className: 'files-fg-danger small files-error-lines',
                                                 textContent: f.verificationError.replaceAll('; >', '\n>')}) : null,
                verified ? el('div', {className: 'small text-secondary'}, 'Checked ', when(verified)) : null),
            section('File', el('dl', {className: 'files-kv'},
                el('dt', null, 'Name'), el('dd', null, f.filename),
                el('dt', null, 'Path'), el('dd', null, pathParts(f)),
                el('dt', null, 'Format'), el('dd', null, `${f.extension}${f.compressed ? ', compressed' : ''}`),
                el('dt', null, 'Size'), el('dd', null, formatBytes(f.size)),
                el('dt', null, 'Identified'), el('dd', null, f.identificationType ? `From ${f.identificationType === 'cnmt' ? 'CNMT' : 'file name'}` : 'No'),
                el('dt', null, 'Added'), el('dd', null, when(parseDate(f.addedAt, true))),
                el('dt', null, 'Modified'), el('dd', null, f.mtime ? when(new Date(f.mtime * 1000)) : '…'),
                el('dt', null, 'Downloads'), el('dd', null, f.downloadCount == null ? '…' : String(f.downloadCount)))));
        drawer.dataset.id = f.id;
        drawer.hidden = false;
        paintBusy();
    }

    // --- views ---

    function showTab() {
        const name = location.hash.slice(1);
        current = TABS[name] ? name : 'all';
        notice('');
        closeDrawer();
        document.querySelectorAll('.files-suggest').forEach(m => m.classList.remove('show'));
        paintTiles();
        document.querySelectorAll('.files-status').forEach(s => s.classList.toggle('d-none', s.dataset.tab !== current));
        renderChips();
        renderHead();
        loadTab(false);
    }

    let searchTimer = null;
    let suggestTimer = null;

    function setSearch(text) {
        const tab = TABS[current];
        tab.search = text;
        tab.page = 1;
        if (tab.kind === 'files') loadTab(true); else renderBody();
    }

    /** Title suggestions under the search box, refreshed as it is typed in; an answer to
     *  an older keystroke is dropped. */
    function withSuggestions(input, suggest, pick) {
        const menu = el('div', {className: 'dropdown-menu files-suggest'});
        let items = [], active = -1, asked = 0;
        input.autocomplete = 'off';
        const close = () => { menu.classList.remove('show'); active = -1; };
        const highlight = i => {
            active = i;
            [...menu.children].forEach((item, j) => item.classList.toggle('active', j === i));
        };
        const choose = v => { pick(v); close(); };
        const show = list => {
            items = list;
            active = -1;
            menu.replaceChildren(...list.map(([v, hint]) => {
                const item = el('button', {type: 'button', className: 'dropdown-item'},
                                el('span', {textContent: v}), ' ', muted(hint));
                // mousedown, not click: it lands before the input's blur closes the menu.
                item.addEventListener('mousedown', e => { e.preventDefault(); choose(v); });
                return item;
            }));
            const box = input.getBoundingClientRect();
            Object.assign(menu.style, {left: `${box.left}px`, top: `${box.bottom + 2}px`, minWidth: `${box.width}px`});
            menu.classList.toggle('show', list.length > 0);
        };
        input.addEventListener('input', () => {
            clearTimeout(suggestTimer);
            const text = input.value.trim();
            const ask = ++asked;
            if (!text) return close();
            suggestTimer = setTimeout(async () => {
                try {
                    const list = await suggest(text);
                    if (ask === asked) show(list);
                } catch (e) { close(); }
            }, 150);
        });
        input.addEventListener('keydown', e => {
            if (!menu.classList.contains('show')) return;
            if (e.key === 'ArrowDown') { e.preventDefault(); highlight(Math.min(active + 1, items.length - 1)); }
            else if (e.key === 'ArrowUp') { e.preventDefault(); highlight(Math.max(active - 1, 0)); }
            else if (e.key === 'Enter' && active >= 0) { e.preventDefault(); choose(items[active][0]); }
            else if (e.key === 'Escape') close();
        });
        input.addEventListener('blur', close);
        input.after(menu);
    }

    const search = document.getElementById('filesSearch');
    search.addEventListener('input', () => {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => setSearch(search.value.trim()), 300);
    });
    withSuggestions(search, suggestTitles, v => {
        search.value = v;
        clearTimeout(searchTimer);
        setSearch(v);
    });

    $('#refreshFiles').on('click', () => { loadStats(); loadTab(true); });
    /** Turn the page; from the bottom pager, back up to the top of the new one. */
    function turnPage(step, button) {
        TABS[current].page += step;
        if (button.closest('#filesPagerBottom')) document.querySelector('.files-toolbar').scrollIntoView({block: 'start'});
        loadTab(true);
    }

    $('.files-prev').on('click', e => turnPage(-1, e.currentTarget));
    $('.files-next').on('click', e => turnPage(1, e.currentTarget));
    $('.files-delete').on('click', runRemoval);
    document.addEventListener('keydown', e => { if (e.key === 'Escape' && drawerId) closeDrawer(); });
    window.addEventListener('hashchange', showTab);

    loadStats();
    loadOptions().catch(e => notice(e.message)).finally(showTab);

</script>
{% endblock %}