{% extends "base.html" %}

{% block title %}Parse | DocSlight Workbench{% endblock %}

{% block content %}
<section class="workbench" aria-label="Parse workbench" data-i18n-aria-label="parse.workbench">
  <form id="parseForm" class="panel config-panel" enctype="multipart/form-data">
    <div class="panel-header">
      <p class="eyebrow" data-i18n="parse.eyebrow">Parse setup</p>
      <h1 data-i18n="parse.title">Parse documents</h1>
      <p data-i18n="parse.description">Convert documents into layout blocks, Markdown, and raw JSON.</p>
    </div>

    <label id="dropZone" class="drop-zone compact-drop-zone" for="fileInput">
      <input id="fileInput" name="file" type="file" accept=".pdf,.png,.jpg,.jpeg,.tif,.tiff,.bmp,.webp,.docx,.pptx,.xlsx" />
      <span class="drop-title" data-i18n="drop.choose">Choose document</span>
      <span class="drop-copy" data-i18n="drop.formats">PDF, image, DOCX, PPTX, XLSX</span>
      <span id="fileName" class="file-name" data-i18n="drop.none">No file selected</span>
    </label>

    <label class="field-label" for="modeSelect" data-i18n="mode.label">Processing mode</label>
    <select id="modeSelect" name="mode">
      <option value="cloud" data-i18n="mode.cloud">Cloud</option>
      <option value="local" data-i18n="mode.local">Local</option>
    </select>

    <div id="cloudConfig" class="config-block">
      <label class="field-label">
        <span data-i18n="cloud.baseUrl">Cloud Base URL</span>
        <input name="base_url" type="url" placeholder="https://api-server.compdf.com" />
      </label>
      <label class="field-label">
        <span data-i18n="cloud.apiKey">API key</span>
        <input name="api_key" type="password" autocomplete="off" placeholder="Cloud API key" data-i18n-placeholder="cloud.apiKeyPlaceholder" />
      </label>
    </div>

    <p id="localParseNote" class="helper-text" data-i18n="parse.localNote">Local parsing uses the configured local runtime.</p>
    <p id="formError" class="form-error" role="alert" hidden></p>
    <button id="submitButton" type="submit" data-i18n="parse.run">Run parse</button>
  </form>

  <section class="panel specimen-panel" aria-label="Document specimen" data-i18n-aria-label="preview.specimen">
    <div class="preview-header">
      <h2 id="previewTitle" data-i18n="preview.title">Document preview</h2>
      <span id="highlightStatus" data-i18n="preview.noHighlight">No highlight selected</span>
    </div>
    <div id="previewCanvas" class="preview-canvas"></div>
    <p id="officePreviewNotice" class="preview-notice" hidden data-i18n="preview.officeUnsupported">Office files can be processed, but preview and positioning highlight are not supported in this version.</p>
  </section>

  <section class="panel result-panel" aria-labelledby="parseResultsTitle">
    <div class="result-header">
      <h2 id="parseResultsTitle" data-i18n="parse.resultsTitle">Parse results</h2>
      <button id="downloadButton" type="button" disabled data-i18n="common.download">Download</button>
    </div>
    <div id="parseResultTabs" class="result-tabs" role="tablist">
      <button type="button" data-result-tab="blocks" data-i18n="parse.tabs.blocks">Blocks</button>
      <button type="button" data-result-tab="markdown" data-i18n="parse.tabs.markdown">Markdown</button>
      <button type="button" data-result-tab="json" data-i18n="parse.tabs.json">JSON</button>
    </div>
    <section id="blocksPanel" data-result-panel="blocks">
      <pre id="blocksResult"></pre>
    </section>
    <section id="markdownPanel" data-result-panel="markdown">
      <pre id="markdownResult"></pre>
    </section>
    <section id="jsonPanel" data-result-panel="json">
      <pre id="jsonResult"></pre>
    </section>
    <details class="metadata-panel">
      <summary data-i18n="common.metadataPreview">Metadata preview</summary>
      <pre id="metadataPreview"></pre>
    </details>
  </section>
</section>
{% endblock %}

{% block page_scripts %}
<script type="module" src="{{ url_for('static', filename='app/parse.js') }}"></script>
{% endblock %}