{# Version timeline partial #}
{% if versions %}
<ul class="timeline timeline-vertical timeline-compact">
  {% for version in versions %}
  <li>
    {% if not loop.first %}<hr />{% endif %}
    <div class="timeline-start text-xs opacity-60">{{ version.created_at }}</div>
    <div class="timeline-middle">
      <div class="w-3 h-3 rounded-full bg-primary"></div>
    </div>
    <div class="timeline-end timeline-box cursor-pointer hover:bg-base-200 transition-colors"
         hx-get="/_console/partials/spec-diff/{{ version.id }}"
         hx-target="#diff-panel"
         hx-swap="innerHTML">
      <div class="flex items-center gap-2">
        <span class="font-semibold">v{{ version.version_label }}</span>
        <span class="badge badge-ghost badge-xs font-mono">{{ version.content_hash }}</span>
      </div>
      {% if version.diff_summary %}
      <p class="text-xs opacity-70 mt-1">{{ version.diff_summary }}</p>
      {% else %}
      <p class="text-xs opacity-50 mt-1">Initial version</p>
      {% endif %}
    </div>
    {% if not loop.last %}<hr />{% endif %}
  </li>
  {% endfor %}
</ul>

{# Pagination #}
{% if total > per_page %}
<div class="flex justify-center mt-4 gap-2">
  {% if page > 1 %}
  <button class="btn btn-sm btn-ghost"
          hx-get="/_console/partials/version-timeline?page={{ page - 1 }}"
          hx-target="#version-timeline"
          hx-swap="innerHTML">Previous</button>
  {% endif %}
  <span class="btn btn-sm btn-disabled">Page {{ page }}</span>
  {% if page * per_page < total %}
  <button class="btn btn-sm btn-ghost"
          hx-get="/_console/partials/version-timeline?page={{ page + 1 }}"
          hx-target="#version-timeline"
          hx-swap="innerHTML">Next</button>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="text-center py-8 opacity-60">
  <p>No spec versions recorded yet.</p>
  <p class="text-sm mt-1">Versions are saved automatically when the server starts with a changed DSL.</p>
</div>
{% endif %}