{# Version history sidebar — Google Docs style #}
<div class="vh-sidebar"
     x-data="{
       diffs: JSON.parse(document.getElementById('version-diffs-json').textContent || '[]'),
       expanded: null,
       compactHunks(prev, curr) {
         return computeHunks(prev, curr)
           .map(h => ({ ...h, lines: h.lines.filter(l => l.text.trim()) }))
           .filter(h => h.lines.length > 0);
       },
       fmtDate(iso) {
         if (!iso) return '';
         return iso.slice(0, 10) + ' ' + iso.slice(11, 19);
       }
     }">
  <h3 class="vh-title">
    <svg class="vh-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <polyline points="12 6 12 12 16 14"/>
    </svg>
    Version history
  </h3>

  <div class="vh-list">
    <template x-for="(diff, di) in diffs" :key="diff.version_id">
      <div class="vh-entry" :class="diff.version_id === {{ version.id }} && 'vh-entry--active'">

        <span class="vh-date" x-text="fmtDate(diff.is_original ? diff.created_at : diff.edited_at)"></span>
        <span class="vh-badge" x-text="diff.is_original ? 'Original version' : 'Current version'" x-show="diff.is_original || diff.version_id === {{ version.id }}"></span>

        <template x-if="!diff.is_original">
          <div class="vh-actions">
            <button class="vh-toggle"
                    @click="expanded === diff.version_id ? (expanded = null) : (expanded = diff.version_id)"
                    x-text="expanded === diff.version_id ? 'Hide changes' : 'Show changes'"></button>
            <template x-if="diff.version_id !== {{ version.id }}">
              <a :href="'/admin/eval/prompts/{{ version.id }}/versions/' + diff.version + '/'"
                 class="vh-link">View</a>
            </template>
          </div>
        </template>

        <template x-if="!diff.is_original && expanded === diff.version_id">
          <div class="vh-diff" x-data="{ hunks: compactHunks(diff.prev_prompt, diff.prompt) }">
            <template x-for="(hunk, hi) in hunks" :key="hi">
              <div>
                <template x-if="hunk.separator">
                  <div class="vh-diff-sep">···</div>
                </template>
                <template x-for="(line, li) in hunk.lines" :key="hi + '-' + li">
                  <div class="vh-diff-line" :class="'vh-diff-line--' + line.type">
                    <span class="vh-diff-gutter" x-text="line.type === 'add' ? '+' : line.type === 'remove' ? '−' : ' '"></span>
                    <span x-text="line.text"></span>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </template>

      </div>
    </template>
  </div>
</div>