{% extends "base.html" %}

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

{% block content %}
<section class="workbench" aria-label="Extract workbench" data-i18n-aria-label="extract.workbench">
  <form id="extractForm" class="panel config-panel" enctype="multipart/form-data">
    <div class="panel-header">
      <p class="eyebrow" data-i18n="extract.eyebrow">Extract setup</p>
      <h1 data-i18n="extract.title">Extract fields</h1>
      <p data-i18n="extract.description">Define fields and tables, then extract structured values from a document.</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>
      <label class="field-label">
        <span data-i18n="cloud.extractMode">Cloud model</span>
        <select id="cloudExtractMode" name="cloud_extract_mode">
          <option value="vlm">vlm</option>
          <option value="integrate">integrate</option>
        </select>
      </label>
      <label id="groundingToggle" class="checkbox-label" hidden>
        <input id="enableGrounding" name="enable_grounding" type="checkbox" value="true" checked />
        <span data-i18n="cloud.enableGrounding">Enable grounding</span>
      </label>
    </div>

    <fieldset id="localLlmBlock" class="config-block">
      <legend data-i18n="extract.localLlm">Local LLM</legend>
      <label class="field-label">
        <span data-i18n="extract.provider">Provider</span>
        <select name="local_llm_provider">
          <option value="ollama">ollama</option>
          <option value="openai-compatible">openai-compatible</option>
          <option value="openai">openai</option>
        </select>
      </label>
      <label class="field-label">
        <span data-i18n="extract.model">Model</span>
        <input name="local_llm_model" type="text" placeholder="llama3.1" />
      </label>
      <label class="field-label">
        <span data-i18n="extract.baseUrl">Base URL</span>
        <input name="local_llm_base_url" type="url" placeholder="http://localhost:11434" />
      </label>
      <label class="field-label">
        <span data-i18n="extract.apiKey">API key</span>
        <input name="local_llm_api_key" type="password" autocomplete="off" placeholder="optional" data-i18n-placeholder="extract.optionalPlaceholder" />
      </label>
    </fieldset>

    <section id="fieldsBuilder" class="fields-builder" aria-labelledby="fieldsBuilderTitle">
      <h2 id="fieldsBuilderTitle" data-i18n="fields.title">Fields</h2>
      <label class="field-label" for="fieldTemplateName" data-i18n="fields.templateName">Template name</label>
      <input id="fieldTemplateName" type="text" placeholder="Invoice" data-i18n-placeholder="fields.templatePlaceholder" />
      <div id="fieldsRows" class="fields-rows"></div>
      <div class="field-actions">
        <button id="addFieldButton" type="button" data-i18n="fields.addField">Add field</button>
        <button id="addTableButton" type="button" data-i18n="fields.addTable">Add table</button>
      </div>
      <input name="fields" type="hidden" />
    </section>

    <p id="formError" class="form-error" role="alert" hidden></p>
    <button id="submitButton" type="submit" data-i18n="extract.run">Run extract</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="extractResultsTitle">
    <div class="result-header">
      <h2 id="extractResultsTitle" data-i18n="extract.resultsTitle">Extract results</h2>
      <button id="downloadButton" type="button" disabled data-i18n="common.download">Download</button>
    </div>
    <div id="extractResultTabs" class="result-tabs" role="tablist">
      <button type="button" data-result-tab="fields" data-i18n="extract.tabs.fields">Fields</button>
      <button type="button" data-result-tab="json" data-i18n="extract.tabs.json">JSON</button>
    </div>
    <section id="fieldsPanel" data-result-panel="fields">
      <pre id="fieldsResult"></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/extract.js') }}"></script>
{% endblock %}