{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Subjects Normalizer</h1>

  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-grid">
      <div>
        <div class="meta-label">Mode</div>
        <div class="subject-title" style="margin:0">
          {% if applied %}Applied{% else %}Dry-run (Preview){% endif %}
        </div>
      </div>
      <div>
        <div class="meta-label">Entries Changed</div>
        <div class="subject-title" style="margin:0">{{ changed }}</div>
      </div>
      <div>
        <div class="meta-label">Preview Limit</div>
        <div class="subject-title" style="margin:0">
          {% if limit and limit|add:0 > 0 %}{{ limit }}{% else %}All{% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-label" style="margin-bottom:8px;">Actions</div>
    <div style="display:flex; gap:10px; flex-wrap:wrap;">
      <!-- Run another dry-run with optional limit -->
      <form method="get" action="{% url 'normalize_subjects' %}" class="inline" style="display:flex; gap:8px; align-items:center;">
        <input type="number" min="0" name="limit" value="{{ limit|default_if_none:'' }}" placeholder="Preview limit (optional)"
               style="border:1px solid var(--border); border-radius:8px; padding:6px 8px;">
        <button class="btn btn-secondary">Run Preview</button>
      </form>

      {% if user.is_authenticated and user.is_staff %}
      <!-- Apply to all (POST) -->
      <form method="post" action="{% url 'normalize_subjects' %}">
        {% csrf_token %}
        <button class="btn btn-danger"
                onclick="return confirm('Apply subject normalization to ALL entries? This will modify the Subject field. Make a backup first.');">
          Apply to All
        </button>
      </form>
      {% endif %}

      <a class="btn" href="{% url 'stats' %}">← Back to Statistics</a>
    </div>
    <div class="small muted" style="margin-top:8px;">
      Tip: Use <code>?limit=500</code> on the preview to sample a subset before applying to everything.
    </div>
  </div>

  <div class="card" style="padding:16px;">
    <h3 style="margin:0 0 10px;">Preview of Changes (first 100)</h3>
    {% if preview %}
      <div class="small muted" style="margin-bottom:8px;">
        Showing up to 100 changed rows.
      </div>
      <div style="overflow:auto;">
        <table class="table small" style="width:100%; border-collapse:collapse;">
          <thead>
            <tr>
              <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">ID</th>
              <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">Before</th>
              <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">After</th>
            </tr>
          </thead>
          <tbody>
            {% for eid, before, after in preview %}
              <tr>
                <td style="vertical-align:top; padding:8px; border-bottom:1px solid #eee;">
                  {{ eid }}
                </td>
                <td style="vertical-align:top; padding:8px; border-bottom:1px solid #eee;">
                  <code>{{ before }}</code>
                </td>
                <td style="vertical-align:top; padding:8px; border-bottom:1px solid #eee;">
                  <code>{{ after }}</code>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="muted">No differences to show.</div>
    {% endif %}
  </div>
</div>
{% endblock %}