{% extends "base.html" %}
{% block title %}Annotate — {{ project.name }} — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="/projects/{{ project.id }}" class="muted">← {{ project.name }}</a>
    <h1>Annotate · {{ project.project_type.value | replace('_', ' ') | title }}</h1>
    <p class="subtitle">{{ modality }} modality</p>
  </div>
  <div class="header-actions">
    <a class="btn btn-secondary" href="/projects/{{ project.id }}/upload">Import</a>
    <a class="btn btn-ghost" href="/projects/{{ project.id }}">Project</a>
  </div>
</div>

{% set show_classes = chrome.show_classes if chrome is defined else true %}
<div class="annotate-layout" style="display:grid;grid-template-columns:{% if show_classes %}1fr 280px{% else %}1fr{% endif %};gap:1.25rem;align-items:start">
  <div class="section">
    <div class="section-toolbar">
      <div>
        <strong id="sample-index">—</strong>
        <span class="muted" id="sample-meta"></span>
      </div>
      <div style="display:flex;gap:.35rem">
        <button type="button" class="btn btn-secondary btn-sm" id="prev-sample">Prev</button>
        <button type="button" class="btn btn-secondary btn-sm" id="next-sample">Next</button>
      </div>
    </div>

    <div id="sample-body" style="margin-top:1rem"></div>
    {% if chrome is defined and chrome.classes_hint %}
    <p class="muted" style="margin-top:.75rem;font-size:.85rem">{{ chrome.classes_hint }}</p>
    {% endif %}

    {% if project.project_type.value == 'ner' %}
    <div style="margin-top:1.25rem">
      <h3>Spans</h3>
      <ul id="span-list" class="version-list"></ul>
      <div class="inline-form" style="margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap">
        <input type="number" id="span-start" placeholder="start" style="width:5rem">
        <input type="number" id="span-end" placeholder="end" style="width:5rem">
        <select id="span-class"></select>
        <button type="button" class="btn btn-secondary btn-sm" id="add-span">Add span</button>
        <button type="button" class="btn btn-primary btn-sm" id="save-spans">Save spans</button>
      </div>
    </div>
    {% elif project.project_type.value == 'tabular_regression' %}
    <div style="margin-top:1.25rem" class="inline-form">
      <label>Target value</label>
      <input type="number" step="any" id="value-input" style="width:10rem">
      <button type="button" class="btn btn-primary btn-sm" id="save-value">Save value</button>
    </div>
    {% elif project.project_type.value == 'transcription' %}
    <div style="margin-top:1.25rem">
      <h3>Transcript</h3>
      <textarea id="transcript-input" rows="5" style="width:100%"></textarea>
      <button type="button" class="btn btn-primary btn-sm" id="save-transcript" style="margin-top:.5rem">Save transcript</button>
    </div>
    {% elif project.project_type.value == 'preference' %}
    <div style="margin-top:1.25rem;display:grid;gap:.75rem">
      <div><label>Prompt</label><textarea id="pref-prompt" rows="2" style="width:100%"></textarea></div>
      <div><label>Chosen</label><textarea id="pref-chosen" rows="3" style="width:100%"></textarea></div>
      <div><label>Rejected</label><textarea id="pref-rejected" rows="3" style="width:100%"></textarea></div>
      <button type="button" class="btn btn-primary btn-sm" id="save-preference">Save preference</button>
    </div>
    {% elif project.project_type.value == 'instruction_tuning' %}
    <div style="margin-top:1.25rem;display:grid;gap:.75rem">
      <div><label>Instruction</label><textarea id="inst-instruction" rows="2" style="width:100%"></textarea></div>
      <div><label>Input</label><textarea id="inst-input" rows="2" style="width:100%"></textarea></div>
      <div><label>Output</label><textarea id="inst-output" rows="4" style="width:100%"></textarea></div>
      <button type="button" class="btn btn-primary btn-sm" id="save-instruction">Save</button>
    </div>
    {% elif project.project_type.value == 'rag_eval' %}
    <div style="margin-top:1.25rem;display:grid;gap:.75rem">
      <div><label>Query</label><textarea id="rag-query" rows="2" style="width:100%"></textarea></div>
      <div><label>Contexts (JSON array or text)</label><textarea id="rag-contexts" rows="3" style="width:100%"></textarea></div>
      <div><label>Answer</label><textarea id="rag-answer" rows="3" style="width:100%"></textarea></div>
      <label class="toggle-row"><input type="checkbox" id="rag-relevant"> Relevant</label>
      <button type="button" class="btn btn-primary btn-sm" id="save-rag">Save RAG eval</button>
    </div>
    {% elif project.project_type.value in ['audio_classification','video_classification','action_recognition','text_classification','tabular_classification'] %}
    <div style="margin-top:1.25rem">
      <h3>Label</h3>
      <div id="class-buttons" style="display:flex;flex-wrap:wrap;gap:.5rem"></div>
    </div>
    {% else %}
    <div style="margin-top:1.25rem">
      <h3>Label</h3>
      <div id="class-buttons" style="display:flex;flex-wrap:wrap;gap:.5rem"></div>
    </div>
    {% endif %}
  </div>

  {% if show_classes %}
  <aside class="section">
    <h3>Classes</h3>
    <ul id="class-sidebar" class="version-list"></ul>
    <p class="muted" style="margin-top:1rem;font-size:0.85rem">← → navigate samples</p>
  </aside>
  {% endif %}
</div>

<script>
  window.PROJECT_ID = {{ project.id }};
  window.PROJECT_TYPE = {{ project.project_type.value | tojson }};
  window.MODALITY = {{ modality | tojson }};
  window.PROJECT_CHROME = {{ chrome | tojson if chrome is defined else '{}' }};
  window.CLASSES = {{ classes_json | safe }};
</script>
<script src="/static/js/annotate_samples.js"></script>
{% endblock %}