import Viewer from "@wrnexus/viewer/components/Viewer.wrn"

page FileViewerDemo {
  layout = "public"
  render = "hybrid"
  hydrate = "load"

  view {
    <main class="file-viewer-demo">
      <h1>File previews</h1>
      <h2>Browse several files</h2>
      <Viewer files={[{src: '/viewer/sample.png', name: 'sample.png'}, {src: '/viewer/sample.html', name: 'sample.html'}, {src: '/viewer/sample.wav', name: 'sample.wav'}, {src: '/viewer/sample.docx', name: 'sample.docx'}]} />
      <h2>Rich PDF canvas</h2>
      <Viewer src="/viewer/sample.pdf" name="rich-sample.pdf" mime="application/pdf" richPdf={true} />
      <p>Images, documents, media, tables, trees, vectors, and archives share the app theme and preview controls.</p>
      <h2>Image</h2>
      <Viewer src="/viewer/sample.png" name="sample.png" />
      <h2>Document</h2>
      <Viewer src="/viewer/sample.pdf" name="sample.pdf" />
      <h2>Video</h2>
      <Viewer src="/viewer/sample.webm" name="sample.webm" />
      <h2>Open a preview over the page</h2>
      <p>Any element with <code>data-viewer-open</code> opens the file in a dialog.</p>
      <p>
        <button type="button" data-viewer-open data-src="/viewer/sample.webm" data-name="sample.webm">Preview the video</button>
        <button type="button" data-viewer-open data-src="/viewer/sample.pptx" data-name="sample.pptx">Preview the deck</button>
      </p>
      <h2>Covering the page</h2>
      <p>A viewer can mount already expanded, with a Close control that returns it inline.</p>
      <Viewer src="/viewer/sample.png" name="expanded.png" fullScreen={false} />
      <h2>Audio</h2>
      <Viewer src="/viewer/sample.wav" name="sample.wav" />
      <h2>Structured data</h2>
      <Viewer src="/viewer/sample.json" name="sample.json" />
      <Viewer src="/viewer/sample.xml" name="sample.xml" />
      <h2>Spreadsheet</h2>
      <Viewer src="/viewer/sample.csv" name="sample.csv" />
      <Viewer src="/viewer/sample.xlsx" name="sample.xlsx" />
      <h2>Vector graphic</h2>
      <Viewer src="/viewer/sample.svg" name="sample.svg" />
      <h2>Archive</h2>
      <Viewer src="/viewer/sample.tar" name="sample.tar" />
      <Viewer src="/viewer/sample.zip" name="sample.zip" />
      <h2>HTML preview and source</h2>
      <Viewer src="/viewer/sample.html" name="sample.html" />
      <h2>From uploader storage</h2>
      <p>A public object serves itself; a private one resolves to a short-lived signed link.</p>
      <Viewer key="brand-logo.png" store="media" />
      <Viewer key="quarterly-report.pdf" store="reports" />
      <Viewer key="regional-figures.csv" store="reports" />
      <h2>Office documents</h2>
      <p>Presentations, OpenDocument files and RTF read in the browser; a converter, where one is installed, is preferred for page-faithful output.</p>
      <Viewer src="/viewer/sample.pptx" name="sample.pptx" />
      <Viewer src="/viewer/sample.odt" name="sample.odt" />
      <Viewer src="/viewer/sample.ods" name="sample.ods" />
      <Viewer src="/viewer/sample.rtf" name="sample.rtf" />
      <h2>Optional parser or server-side converter</h2>
      <Viewer src="/viewer/sample.docx" name="sample.docx" />
      <h2>Unsupported file</h2>
      <Viewer src="/viewer/sample.bin" name="sample.bin" />
    </main>
  }
  style {
    .file-viewer-demo { display: grid; gap: 1rem; max-width: 64rem; margin: 2rem auto; padding: 1rem; }
  }
}