@php
    $filesData = is_array($pageData) ? $pageData : [];
    $currentPath = $filesData['path'] ?? '/storage/emulated/0';
    $roots = $filesData['roots'] ?? [];
    $listing = $filesData['listing'] ?? ['entries' => [], 'ready' => false, 'error' => null];
@endphp

<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 mb-4 text-sm text-slate-700">
    <p class="font-medium text-slate-900">{{ __('devices.files.title') }}</p>
    <p class="mt-1 text-xs text-slate-600">{{ __('devices.files.hint') }}</p>
</div>

<div class="flex flex-wrap items-center gap-2 mb-3">
    <button type="button" id="files-refresh"
            class="px-3 py-1.5 rounded text-sm bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50">
        {{ __('devices.files.refresh') }}
    </button>
    <button type="button" id="files-up"
            class="px-3 py-1.5 rounded text-sm bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-40">
        {{ __('devices.files.up') }}
    </button>
    <span id="files-status" class="text-xs text-gray-500 ml-2"></span>
</div>

<div class="flex flex-wrap gap-2 mb-4">
    @foreach($roots as $root)
        <button type="button"
                class="files-root px-2 py-1 rounded text-xs bg-gray-100 text-gray-700 hover:bg-gray-200 font-mono"
                data-path="{{ $root }}">{{ $root }}</button>
    @endforeach
</div>

<nav id="files-breadcrumbs" class="text-xs font-mono text-gray-600 mb-3 break-all" aria-label="Ruta"></nav>

<div class="overflow-x-auto border border-gray-200 rounded-lg">
    <table class="min-w-full text-sm">
        <thead>
            <tr class="border-b border-gray-200 bg-gray-50 text-left text-xs text-gray-500 uppercase">
                <th class="py-2 px-2 w-16">{{ __('devices.files.col_preview') }}</th>
                <th class="py-2 px-3">
                    <button type="button" class="files-sort inline-flex items-center gap-1 hover:text-gray-800" data-sort="name">
                        {{ __('devices.files.col_name') }}
                        <span class="files-sort-icon text-indigo-600 normal-case" aria-hidden="true"></span>
                    </button>
                </th>
                <th class="py-2 px-3 w-24">
                    <button type="button" class="files-sort inline-flex items-center gap-1 hover:text-gray-800" data-sort="size">
                        {{ __('devices.files.col_size') }}
                        <span class="files-sort-icon text-indigo-600 normal-case" aria-hidden="true"></span>
                    </button>
                </th>
                <th class="py-2 px-3 w-36">
                    <button type="button" class="files-sort inline-flex items-center gap-1 hover:text-gray-800" data-sort="modified">
                        {{ __('devices.files.col_modified') }}
                        <span class="files-sort-icon text-indigo-600 normal-case" aria-hidden="true"></span>
                    </button>
                </th>
                <th class="py-2 px-3 w-24">
                    <button type="button" class="files-sort inline-flex items-center gap-1 hover:text-gray-800" data-sort="type">
                        {{ __('devices.files.col_type') }}
                        <span class="files-sort-icon text-indigo-600 normal-case" aria-hidden="true"></span>
                    </button>
                </th>
                <th class="py-2 px-3 w-36 text-right">{{ __('devices.files.col_actions') }}</th>
            </tr>
        </thead>
        <tbody id="files-tbody">
            <tr>
                <td colspan="6" class="py-6 px-3 text-center text-gray-500 text-sm">
                    {{ __('devices.files.loading') }}
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="files-preview-modal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
     role="dialog" aria-modal="true">
    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
        <div class="flex justify-between items-center border-b px-4 py-2">
            <span id="files-preview-title" class="text-sm font-medium truncate"></span>
            <button type="button" id="files-preview-close" class="text-gray-500 hover:text-gray-800 text-xl leading-none">&times;</button>
        </div>
        <div id="files-preview-body" class="p-4 overflow-auto flex-1 min-h-[200px]"></div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const urls = {
        data: @json(route('devices.files.data', $device)),
        list: @json(route('devices.files.list', $device)),
        download: @json(route('devices.files.download', $device)),
        downloadStatus: @json(route('devices.files.download-status', $device)),
        thumb: @json(route('devices.files.thumb.request', $device)),
        thumbStatus: @json(route('devices.files.thumb-status', $device)),
    };
    const i18n = {
        loading: @json(__('devices.files.loading')),
        empty: @json(__('devices.files.empty')),
        folder: @json(__('devices.files.folder')),
        file: @json(__('devices.files.file')),
        open: @json(__('devices.files.open')),
        download: @json(__('devices.files.download')),
        view: @json(__('devices.files.view')),
        waiting: @json(__('devices.files.waiting_device')),
        error: @json(__('devices.files.error')),
        ready: @json(__('devices.files.ready')),
        downloading: @json(__('devices.files.downloading')),
        downloadReady: @json(__('devices.files.download_ready')),
        thumbLoading: @json(__('devices.files.thumb_loading')),
        cachedRefreshing: @json(__('devices.files.cached_refreshing')),
        thumbsGenerating: @json(__('devices.files.thumbs_generating')),
    };
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || @json(csrf_token());
    const POLL_FAST_MS = 1000;
    const POLL_SLOW_MS = 2000;
    const POLL_FAST_ATTEMPTS = 25;
    const THUMB_AUTO_MAX = 0;
    const THUMB_REFRESH_MS = 3000;
    const THUMB_REFRESH_MAX = 40;

    let currentPath = @json($currentPath);
    let pollTimer = null;
    let thumbRefreshTimer = null;
    let downloadPollTimer = null;
    const thumbQueue = [];
    let thumbQueueRunning = false;
    let lastListingData = null;
    let sortState = { column: 'default', dir: 'asc' };

    const tbody = document.getElementById('files-tbody');
    const statusEl = document.getElementById('files-status');
    const breadcrumbs = document.getElementById('files-breadcrumbs');
    const btnRefresh = document.getElementById('files-refresh');
    const btnUp = document.getElementById('files-up');
    const modal = document.getElementById('files-preview-modal');
    const previewBody = document.getElementById('files-preview-body');
    const previewTitle = document.getElementById('files-preview-title');

    function setStatus(text, isError = false) {
        statusEl.textContent = text || '';
        statusEl.className = 'text-xs ml-2 ' + (isError ? 'text-red-600' : 'text-gray-500');
    }

    function parentPath(path) {
        if (!path || path === '/') return '/';
        const parts = path.replace(/\/+$/, '').split('/');
        parts.pop();
        const p = parts.join('/') || '/';
        return p === '' ? '/' : p;
    }

    function renderBreadcrumbs(path) {
        const parts = path.split('/').filter(Boolean);
        let html = '<a href="#" class="files-crumb text-indigo-600 hover:underline" data-path="/">/</a>';
        let acc = '';
        parts.forEach((part, i) => {
            acc += '/' + part;
            const p = acc;
            html += ' <span class="text-gray-400">/</span> ';
            if (i === parts.length - 1) {
                html += '<span class="text-gray-800">' + escapeHtml(part) + '</span>';
            } else {
                html += '<a href="#" class="files-crumb text-indigo-600 hover:underline" data-path="' + escapeAttr(p) + '">' + escapeHtml(part) + '</a>';
            }
        });
        breadcrumbs.innerHTML = html;
        breadcrumbs.querySelectorAll('.files-crumb').forEach(a => {
            a.addEventListener('click', e => {
                e.preventDefault();
                navigateTo(a.dataset.path);
            });
        });
        btnUp.disabled = path === '/' || path === '';
    }

    function escapeHtml(s) {
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    function escapeAttr(s) {
        return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
    }

    function compareEntries(a, b) {
        const col = sortState.column;
        const dir = sortState.dir === 'desc' ? -1 : 1;

        if (col === 'default') {
            const ad = a.isDir ? 0 : 1;
            const bd = b.isDir ? 0 : 1;
            if (ad !== bd) {
                return (ad - bd) * dir;
            }
            return String(a.name || '').localeCompare(String(b.name || ''), 'es', { sensitivity: 'base' }) * dir;
        }

        let cmp = 0;
        if (col === 'name') {
            cmp = String(a.name || '').localeCompare(String(b.name || ''), 'es', { sensitivity: 'base' });
        } else if (col === 'size') {
            const as = a.isDir ? -1 : (Number(a.size) || 0);
            const bs = b.isDir ? -1 : (Number(b.size) || 0);
            cmp = as - bs;
        } else if (col === 'modified') {
            cmp = (Number(a.modified) || 0) - (Number(b.modified) || 0);
        } else if (col === 'type') {
            const ad = a.isDir ? 0 : 1;
            const bd = b.isDir ? 0 : 1;
            cmp = ad - bd;
        }

        return cmp * dir;
    }

    function sortEntries(entries) {
        const parent = entries.find(e => (e.name || '') === '../');
        const rest = entries.filter(e => (e.name || '') !== '../');
        rest.sort(compareEntries);
        return parent ? [parent, ...rest] : rest;
    }

    function updateSortHeaders() {
        document.querySelectorAll('.files-sort').forEach(btn => {
            const col = btn.dataset.sort;
            const icon = btn.querySelector('.files-sort-icon');
            const active = sortState.column === col || (sortState.column === 'default' && col === 'name');
            btn.classList.toggle('text-gray-800', active);
            btn.classList.toggle('font-semibold', active);
            if (!icon) return;
            if (!active) {
                icon.textContent = '';
                btn.removeAttribute('aria-sort');
                return;
            }
            const arrow = sortState.dir === 'asc' ? '↑' : '↓';
            icon.textContent = arrow;
            btn.setAttribute('aria-sort', sortState.dir === 'asc' ? 'ascending' : 'descending');
        });
    }

    function onSortHeaderClick(column) {
        if (sortState.column === column) {
            sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
        } else {
            sortState.column = column;
            sortState.dir = 'asc';
        }
        updateSortHeaders();
        if (lastListingData) {
            renderTable(lastListingData);
        }
    }

    function previewCell(entry) {
        const path = entry.path || '';
        const isDir = !!entry.isDir;
        if (isDir || (entry.name || '') === '../') {
            return '<span class="text-gray-300 text-lg">' + (isDir ? '📁' : '↑') + '</span>';
        }
        if (entry.is_image && entry.thumb_url) {
            return '<img src="' + escapeAttr(entry.thumb_url) + '" alt="" class="w-12 h-12 object-cover rounded border border-gray-200 cursor-pointer files-thumb-preview" data-url="' + escapeAttr(entry.thumb_url) + '" data-name="' + escapeAttr(entry.name || '') + '">';
        }
        if (entry.is_image) {
            return '<button type="button" title="' + escapeAttr(i18n.thumbLoading) + '" class="files-thumb-pending inline-block w-12 h-12 rounded border border-dashed border-gray-300 text-[10px] text-gray-500 hover:border-indigo-400 hover:text-indigo-600 flex items-center justify-center text-center leading-tight cursor-pointer" data-path="' + escapeAttr(path) + '">…</button>';
        }
        return '<span class="text-gray-400 text-lg">📄</span>';
    }

    function renderTable(data) {
        lastListingData = data;
        renderBreadcrumbs(data.path || currentPath);
        currentPath = data.path || currentPath;

        if (data.error) {
            tbody.innerHTML = '<tr><td colspan="6" class="py-6 px-3 text-center text-red-600 text-sm">' + escapeHtml(data.error) + '</td></tr>';
            setStatus(i18n.error, true);
            return;
        }

        const entries = sortEntries(data.entries || []);
        if (!entries.length) {
            tbody.innerHTML = '<tr><td colspan="6" class="py-6 px-3 text-center text-gray-500 text-sm">' + i18n.empty + '</td></tr>';
            setStatus(data.ready ? i18n.ready : i18n.waiting);
            return;
        }

        tbody.innerHTML = entries.map(entry => {
            const name = escapeHtml(entry.name || '—');
            const path = entry.path || '';
            const isDir = !!entry.isDir;
            const isParent = name === '../';
            const typeLabel = isDir ? i18n.folder : i18n.file;
            const sizeLabel = escapeHtml(entry.size_label || '—');
            const modLabel = escapeHtml(entry.modified_label || '—');
            let actions = '';
            if (isDir) {
                actions = '<button type="button" class="files-open text-indigo-600 hover:underline text-xs" data-path="' + escapeAttr(path) + '">' + i18n.open + '</button>';
            } else if (!isParent) {
                actions = '<button type="button" class="files-dl mr-2 text-indigo-600 hover:underline text-xs" data-path="' + escapeAttr(path) + '" data-image="' + (entry.is_image ? '1' : '0') + '">' + i18n.download + '</button>'
                    + '<button type="button" class="files-view text-gray-600 hover:underline text-xs" data-path="' + escapeAttr(path) + '" data-image="' + (entry.is_image ? '1' : '0') + '" data-thumb="' + escapeAttr(entry.thumb_url || '') + '">' + i18n.view + '</button>';
            }
            return '<tr class="border-b border-gray-100 hover:bg-gray-50">'
                + '<td class="py-2 px-2 align-middle">' + previewCell(entry) + '</td>'
                + '<td class="py-2 px-3"><button type="button" class="files-open text-left ' + (isDir ? 'font-medium' : '') + '" data-path="' + escapeAttr(path) + '">' + name + '</button></td>'
                + '<td class="py-2 px-3 text-xs text-gray-600 font-mono">' + sizeLabel + '</td>'
                + '<td class="py-2 px-3 text-xs text-gray-600">' + modLabel + '</td>'
                + '<td class="py-2 px-3 text-xs text-gray-500">' + typeLabel + '</td>'
                + '<td class="py-2 px-3 text-right">' + actions + '</td></tr>';
        }).join('');

        bindTableEvents();
        queueMissingThumbnails(entries);
        const pendingThumbs = entries.some(e => e.is_image && !e.thumb_ready && e.name !== '../');
        if (pendingThumbs && data.ready) {
            setStatus(i18n.thumbsGenerating);
            startThumbRefreshPoll();
        } else if (!thumbRefreshTimer) {
            setStatus(data.ready ? i18n.ready : i18n.waiting);
        }
    }

    function stopThumbRefreshPoll() {
        if (thumbRefreshTimer) {
            clearInterval(thumbRefreshTimer);
            thumbRefreshTimer = null;
        }
    }

    function startThumbRefreshPoll() {
        if (thumbRefreshTimer) {
            return;
        }
        let attempts = 0;
        thumbRefreshTimer = setInterval(async () => {
            attempts++;
            try {
                const data = await fetchListing(currentPath);
                if (data.ready) {
                    renderTable(data);
                    const still = (data.entries || []).some(e => e.is_image && !e.thumb_ready && e.name !== '../');
                    if (!still || attempts >= THUMB_REFRESH_MAX) {
                        stopThumbRefreshPoll();
                        if (!still) {
                            setStatus(i18n.ready);
                        }
                    }
                }
            } catch { /* ignore */ }
            if (attempts >= THUMB_REFRESH_MAX) {
                stopThumbRefreshPoll();
            }
        }, THUMB_REFRESH_MS);
    }

    function bindTableEvents() {
        tbody.querySelectorAll('.files-open').forEach(btn => {
            btn.addEventListener('click', () => navigateTo(btn.dataset.path));
        });
        tbody.querySelectorAll('.files-dl').forEach(btn => {
            btn.addEventListener('click', () => requestDownload(btn.dataset.path, false));
        });
        tbody.querySelectorAll('.files-view').forEach(btn => {
            btn.addEventListener('click', () => {
                if (btn.dataset.image === '1' && btn.dataset.thumb) {
                    showPreview(btn.dataset.thumb, btn.dataset.path.split('/').pop());
                    return;
                }
                if (btn.dataset.image === '1') {
                    viewImageWithThumb(btn.dataset.path);
                    return;
                }
                requestDownload(btn.dataset.path, true);
            });
        });
        tbody.querySelectorAll('.files-thumb-preview').forEach(img => {
            img.addEventListener('click', () => showPreview(img.dataset.url, img.dataset.name));
        });
        tbody.querySelectorAll('.files-thumb-pending').forEach(btn => {
            btn.addEventListener('click', () => viewImageWithThumb(btn.dataset.path));
        });
    }

    function queueMissingThumbnails(entries) {
        let queued = 0;
        for (const e of entries) {
            if (queued >= THUMB_AUTO_MAX) {
                break;
            }
            if (!e.is_image || e.thumb_ready || !e.path || e.name === '../') {
                continue;
            }
            if (!thumbQueue.includes(e.path)) {
                thumbQueue.push(e.path);
                queued++;
            }
        }
        runThumbQueue();
    }

    async function runThumbQueue() {
        if (thumbQueueRunning || !thumbQueue.length) return;
        thumbQueueRunning = true;
        while (thumbQueue.length) {
            const path = thumbQueue.shift();
            await ensureThumbnail(path, false);
        }
        thumbQueueRunning = false;
        try {
            const data = await fetchListing(currentPath);
            if (data.ready) renderTable(data);
        } catch { /* ignore */ }
    }

    async function ensureThumbnail(remotePath, showWhenReady) {
        try {
            const res = await fetch(urls.thumb, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ path: remotePath }),
            });
            const body = await res.json();
            if (body.ready && body.thumb_url) {
                if (showWhenReady) showPreview(body.thumb_url, remotePath.split('/').pop());
                return body.thumb_url;
            }
            if (body.error) return null;

            const since = body.since || new Date().toISOString();
            for (let i = 0; i < 30; i++) {
                await new Promise(r => setTimeout(r, 2000));
                const q = new URLSearchParams({ path: remotePath, since });
                const st = await fetch(urls.thumbStatus + '?' + q.toString(), { headers: { 'Accept': 'application/json' } });
                const data = await st.json();
                if (data.ready && data.thumb_url) {
                    if (showWhenReady) showPreview(data.thumb_url, remotePath.split('/').pop());
                    return data.thumb_url;
                }
            }
        } catch { /* ignore */ }
        return null;
    }

    async function viewImageWithThumb(remotePath) {
        setStatus(i18n.thumbLoading);
        const url = await ensureThumbnail(remotePath, true);
        if (!url) {
            await requestDownload(remotePath, true);
        }
    }

    async function fetchListing(path) {
        const res = await fetch(urls.data + '?path=' + encodeURIComponent(path), {
            headers: { 'Accept': 'application/json' },
        });
        if (!res.ok) throw new Error('fetch');
        return res.json();
    }

    function stopPoll() {
        if (pollTimer) {
            clearTimeout(pollTimer);
            pollTimer = null;
        }
    }

    function startPoll(path, maxAttempts = 45) {
        stopPoll();
        let attempts = 0;
        const tick = async () => {
            attempts++;
            try {
                const data = await fetchListing(path);
                renderTable(data);
                if (data.ready || data.error || attempts >= maxAttempts) {
                    stopPoll();
                    btnRefresh.disabled = false;
                    return;
                }
            } catch {
                if (attempts >= maxAttempts) {
                    stopPoll();
                    btnRefresh.disabled = false;
                    setStatus(i18n.error, true);
                    return;
                }
            }
            const delay = attempts < POLL_FAST_ATTEMPTS ? POLL_FAST_MS : POLL_SLOW_MS;
            pollTimer = setTimeout(tick, delay);
        };
        pollTimer = setTimeout(tick, POLL_FAST_MS);
    }

    async function navigateTo(path) {
        thumbQueue.length = 0;
        stopThumbRefreshPoll();
        sortState = { column: 'default', dir: 'asc' };
        updateSortHeaders();
        currentPath = path;
        const url = new URL(window.location.href);
        url.searchParams.set('path', path);
        window.history.replaceState({}, '', url);
        renderBreadcrumbs(path);

        let showedCache = false;
        try {
            const cached = await fetchListing(path);
            if (cached.ready && (cached.entries?.length || cached.error)) {
                renderTable(cached);
                showedCache = true;
                setStatus(i18n.cachedRefreshing);
            }
        } catch { /* ignore */ }

        if (!showedCache) {
            tbody.innerHTML = '<tr><td colspan="6" class="py-6 px-3 text-center text-gray-500 text-sm">' + i18n.loading + '</td></tr>';
        }
        await requestListFromDevice(path);
    }

    async function requestListFromDevice(path) {
        btnRefresh.disabled = true;
        setStatus(i18n.waiting);
        try {
            const res = await fetch(urls.list, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ path }),
            });
            const body = await res.json();
            if (!res.ok || body.error) {
                setStatus(body.message || i18n.error, true);
                btnRefresh.disabled = false;
                return;
            }
            startPoll(path);
        } catch {
            setStatus(i18n.error, true);
            btnRefresh.disabled = false;
        }
    }

    async function requestDownload(remotePath, openPreview) {
        setStatus(i18n.downloading);
        const since = new Date().toISOString();
        try {
            const res = await fetch(urls.download, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ path: remotePath }),
            });
            const body = await res.json();
            if (!res.ok || body.error) {
                setStatus(body.message || i18n.error, true);
                return;
            }
            pollDownloadStatus(remotePath, since, openPreview);
        } catch {
            setStatus(i18n.error, true);
        }
    }

    function pollDownloadStatus(remotePath, since, openPreview) {
        if (downloadPollTimer) clearInterval(downloadPollTimer);
        let attempts = 0;
        downloadPollTimer = setInterval(async () => {
            attempts++;
            try {
                const q = new URLSearchParams({ path: remotePath, since });
                const res = await fetch(urls.downloadStatus + '?' + q.toString(), {
                    headers: { 'Accept': 'application/json' },
                });
                const data = await res.json();
                if (data.ready) {
                    clearInterval(downloadPollTimer);
                    downloadPollTimer = null;
                    setStatus(i18n.downloadReady);
                    if (openPreview && data.preview_url) {
                        showPreview(data.preview_url, data.original_name || remotePath.split('/').pop());
                    } else if (data.download_url) {
                        const a = document.createElement('a');
                        a.href = data.download_url;
                        a.download = data.original_name || '';
                        a.target = '_blank';
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                    }
                    return;
                }
            } catch { /* ignore */ }
            if (attempts >= 60) {
                clearInterval(downloadPollTimer);
                downloadPollTimer = null;
                setStatus(i18n.error, true);
            }
        }, 2000);
    }

    function showPreview(url, title) {
        previewTitle.textContent = title;
        previewBody.innerHTML = '';
        const img = document.createElement('img');
        img.src = url;
        img.alt = title;
        img.className = 'max-w-full h-auto mx-auto';
        previewBody.appendChild(img);
        modal.classList.remove('hidden');
    }

    document.getElementById('files-preview-close').addEventListener('click', () => {
        modal.classList.add('hidden');
        previewBody.innerHTML = '';
    });
    modal.addEventListener('click', e => {
        if (e.target === modal) {
            modal.classList.add('hidden');
            previewBody.innerHTML = '';
        }
    });

    btnRefresh.addEventListener('click', () => requestListFromDevice(currentPath));
    btnUp.addEventListener('click', () => navigateTo(parentPath(currentPath)));
    document.querySelectorAll('.files-root').forEach(btn => {
        btn.addEventListener('click', () => navigateTo(btn.dataset.path));
    });

    document.querySelectorAll('.files-sort').forEach(btn => {
        btn.addEventListener('click', () => onSortHeaderClick(btn.dataset.sort));
    });
    updateSortHeaders();

    (async function init() {
        renderBreadcrumbs(currentPath);
        const listing = @json($listing);
        if (listing.ready && (listing.entries?.length || listing.error)) {
            renderTable(listing);
        } else {
            await requestListFromDevice(currentPath);
        }
    })();
})();
</script>
@endpush