{% extends 'base.html' %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_asset('experiments/similarity.css') }}">
{% endblock %}
{% block content %}
<main class="max-w-6xl mx-auto px-4 py-8 pb-28 space-y-7">
  <header class="space-y-2">
    <a href="{{ url_for('library_view') }}" class="text-sm underline">Return to Library</a>
    <h1 class="text-2xl font-semibold">Similar Images <span class="text-sm font-normal opacity-60">Experiment</span></h1>
    <p class="text-sm opacity-70">Browse generated similarity groups. Viewing results does not call the model.</p>
  </header>

  <section aria-label="Vector status" class="space-y-3">
    <dl class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      {% for label, value in [('Total Images', status.total_images), ('Available', status.indexed), ('Not Built', status.missing), ('Needs Update', status.stale)] %}
      <div><dt class="text-sm opacity-60">{{ label }}</dt><dd class="text-2xl font-semibold">{{ value }}</dd></div>
      {% endfor %}
    </dl>
    {% if status.stale_reasons %}
    <p class="text-sm">Update reasons (may overlap):
      {% set labels = {'model': 'Model changed', 'dimensions': 'Vector dimensions changed', 'image_max_size': 'Image size setting changed', 'image_quality': 'Image quality setting changed', 'file_changed': 'File changed'} %}
      {% for reason, count in status.stale_reasons.items() %}{{ labels[reason] }} {{ count }}{% if not loop.last %} · {% endif %}{% endfor %}
    </p>
    {% endif %}
    <p class="text-sm break-words opacity-70">{{ config.model_name }} · {{ config.dimensions }} dimensions · longest edge {{ config.image_max_size }}px · JPEG quality {{ config.image_quality }}</p>
    <p class="text-sm">{{ status.pending }} images pending. Estimated cost depends on the model provider and processed volume.</p>
    {% if not config.enabled %}<p class="text-sm">Results are view-only because vector building is disabled.</p>{% endif %}
    <details class="text-sm space-y-2">
      <summary class="cursor-pointer underline">Build and update instructions</summary>
      <p>Use the configured media directory in the server terminal. Preview the scope first, then run it; the model is not called without confirmation.</p>
      <pre class="overflow-x-auto p-3 rounded-lg bg-gray-100 dark:bg-gray-800">tiklocal vectorize --dry-run --limit 100
tiklocal vectorize --limit 100
tiklocal analyze-similar</pre>
      <p>Building requires embedding.enabled: true and an API key. Web batch building is disabled to avoid occupying the browsing service.</p>
    </details>
  </section>

  <section aria-label="Similarity groups" class="space-y-3">
    <h2 class="text-lg font-semibold">Similarity Groups</h2>
    <div class="similar-groups-grid">
      {% for group in page['items'] %}
      {% set visible = group['items'][:6] %}
      {% set layout = 'many' if group.count >= 6 else group.count|string %}
      <article class="similar-group-card" data-layout="{{ layout }}">
        <div class="similar-group-grid">
          {% for item in visible %}
          <a class="similar-group-link{% if layout == 'many' and loop.last %} has-count-overlay{% endif %}" href="{{ item.detail_url }}" title="{{ item.name }}">
            <img src="{{ item.thumb_url }}" alt="{{ item.name }}" loading="lazy">
            {% if layout == 'many' and loop.last %}<span class="similar-group-count-overlay">{{ group.count }}</span>{% endif %}
          </a>
          {% endfor %}
        </div>
      </article>
      {% endfor %}
    </div>
    {% if not page['items'] %}<p class="py-8 opacity-70">There are no groups to display on this page. Build vectors, then run local similarity analysis.</p>{% endif %}
    <nav aria-label="Group pagination" class="flex gap-6 text-sm">
      {% if page.offset > 0 %}<a class="underline" href="{{ url_for('similarity_view', offset=[0, page.offset-page.limit]|max) }}">Previous</a>{% endif %}
      {% if page.has_more %}<a class="underline" href="{{ url_for('similarity_view', offset=page.next_offset) }}">Next</a>{% endif %}
    </nav>
  </section>
</main>
{% endblock %}