<bmx-file-manager>

<bmx-file-manager id="ex-fm" label="Project files" root-label="My files"></bmx-file-manager>
<p class="note" id="ex-fm-out" role="status">Double-click a folder to open it; drag files onto a folder, the tree or the path to move them (Ctrl to copy); drop files from your desktop to upload them; F2 renames; right-click for the menu. Anything in Archive is protected by the page and cannot be deleted.</p>

<h3>Browse only, as tiles</h3>

<p class="note">With <code>readonly</code> nothing can change: the reader browses, previews and downloads.</p>
<bmx-file-manager id="ex-fm-ro" readonly view="tiles" show-tree="false" label="Brand assets" style="--bmx-file-manager-height: 22rem"></bmx-file-manager>

<script type="module">
  await customElements.whenDefined('bmx-file-manager');
  const day = 86400000;
  const now = Date.UTC(2026, 9, 6, 9, 30);
  const picture = (hue, label) => {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200"><rect width="320" height="200" fill="hsl(${hue} 70% 88%)"/><circle cx="250" cy="55" r="28" fill="hsl(${(hue + 40) % 360} 90% 65%)"/><path d="M0 200 L90 90 L160 160 L215 110 L320 200z" fill="hsl(${hue} 45% 45%)"/><text x="16" y="34" font-family="sans-serif" font-size="20" fill="hsl(${hue} 50% 25%)">${label}</text></svg>`;
    return { url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, blob: new Blob([svg], { type: 'image/svg+xml' }) };
  };
  const team = picture(200, 'Team day');
  const office = picture(30, 'New office');
  const launch = picture(280, 'Launch');
  const fm = document.getElementById('ex-fm');
  fm.files = [
    { path: '/Projects/Website/index.html', content: '<!doctype html>\n<title>Acme</title>\n<h1>Hello</h1>\n', modified: now - 2 * day },
    { path: '/Projects/Website/styles.css', content: 'body {\n  font-family: system-ui;\n  margin: 0;\n}\n', modified: now - 3 * day },
    { path: '/Projects/Website/site.json', content: '{\n  "name": "acme",\n  "pages": 12\n}\n', modified: now - 6 * day },
    { path: '/Projects/Report Q3/q3-report.pdf', size: 2_480_000, modified: now - 9 * day },
    { path: '/Projects/Report Q3/figures.xlsx', size: 184_320, modified: now - 10 * day },
    { path: '/Projects/Report Q3/notes.md', content: '# Q3 notes\n\n- Revenue up 12%\n- Two new hires\n', modified: now - 8 * day },
    { path: '/Photos/team-day.svg', content: team.blob, thumbnail: team.url, modified: now - 30 * day },
    { path: '/Photos/new-office.svg', content: office.blob, thumbnail: office.url, modified: now - 45 * day },
    { path: '/Photos/launch.svg', content: launch.blob, thumbnail: launch.url, modified: now - 4 * day },
    ...Array.from({ length: 24 }, (_, i) => ({ path: `/Photos/Event/photo-${i + 1}.jpg`, size: 1_200_000 + i * 37_000, modified: now - (60 + i) * day })),
    { path: '/Notes/readme.txt', content: 'Files in this folder are shared with the whole team.\n', modified: now - day },
    { path: '/Notes/meeting-2026-10-01.md', content: '## Agenda\n\n1. Launch\n2. Hiring\n', modified: now - 5 * day },
    { path: '/Archive/2025.zip', size: 48_300_000, modified: now - 280 * day },
    { path: '/Archive/old-site.zip', size: 12_900_000, modified: now - 400 * day },
    { path: '/.env', content: 'SECRET=hidden', modified: now - 2 * day },
    { path: '/budget.xlsx', size: 92_160, modified: now - 12 * day },
  ];
  const out = document.getElementById('ex-fm-out');
  fm.addEventListener('bmxFileManagerAction', e => {
    const { kind, paths } = e.detail;
    if (kind === 'delete' && paths.some(p => p.startsWith('/Archive'))) {
      e.preventDefault();
      out.textContent = 'The page refused: the Archive folder is protected.';
    }
  });
  fm.addEventListener('bmxFileManagerChange', e => (out.textContent = `${e.detail.kind}: ${[...e.detail.paths, e.detail.target ?? '', e.detail.name ?? ''].filter(Boolean).join(' → ')}`));
  fm.addEventListener('bmxFileManagerOpen', e => (out.textContent = `Opened ${e.detail.entry.path}`));

  const ro = document.getElementById('ex-fm-ro');
  ro.files = [
    { path: '/team-day.svg', content: team.blob, thumbnail: team.url },
    { path: '/new-office.svg', content: office.blob, thumbnail: office.url },
    { path: '/launch.svg', content: launch.blob, thumbnail: launch.url },
    { path: '/brand-guide.pdf', size: 3_400_000 },
    { path: '/logo-pack.zip', size: 8_200_000 },
    { path: '/colours.json', content: '{ "primary": "#1971c2", "accent": "#7048e8" }' },
  ];
</script>