{% extends "base.html" %}
{% block title %}Superheroji — Idriz Admin{% endblock %}
{% block extra_css %}
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 20px 22px; margin-bottom: 22px; max-width: 640px; }
  .panel h2 { margin: 0 0 4px; font-size: 16px; }
  .panel p.hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
  .row { display: flex; align-items: center; gap: 12px; }
  input[type=number] { width: 90px; padding: 9px 12px; font-size: 15px;
    border: 1px solid var(--line); border-radius: 8px; }
  button { padding: 9px 18px; font-size: 14px; font-weight: 600; color: #fff;
    background: var(--accent); border: none; border-radius: 8px; cursor: pointer; }
  button:hover { filter: brightness(1.05); }
  button.danger { background: var(--bad); }
  table { width: 100%; border-collapse: collapse; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 640px; }
  th, td { text-align: left; padding: 10px 14px; font-size: 14px; }
  th { background: #fafbfc; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
  tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .rank { color: var(--muted); width: 30px; }
  .src { font-size: 11px; color: var(--muted); }
  .empty { color: var(--muted); font-style: italic; }
{% endblock %}
{% block content %}
  <h1>Superheroji</h1>
  <p class="sub">Podešavanje igre i pamćenje relativnih jačina likova.</p>

  <div class="panel">
    <h2>Broj rundi po partiji</h2>
    <p class="hint">Koliko rundi traje jedna partija ({{ min_rounds }}–{{ max_rounds }}). Primjenjuje se na sljedeću partiju.</p>
    <form method="post" class="row">
      <input type="hidden" name="action" value="rounds">
      <input type="number" name="rounds" min="{{ min_rounds }}" max="{{ max_rounds }}" value="{{ rounds }}">
      <button type="submit">Sačuvaj</button>
    </form>
  </div>

  <h2 style="font-size:16px; margin: 0 0 4px;">Rang-lista heroja</h2>
  <p class="sub">Snaga (rejting) raste kad heroj pobjeđuje. Idriz je koristi da borbe budu dosljedne kroz partije.</p>
  {% if heroes %}
  <table>
    <thead>
      <tr><th class="rank">#</th><th>Heroj</th><th class="num">Snaga</th><th class="num">Pobjede</th><th class="num">Porazi</th><th class="num">Borbi</th></tr>
    </thead>
    <tbody>
      {% for h in heroes %}
      <tr>
        <td class="rank">{{ loop.index }}</td>
        <td>{{ h.name }} {% if h.source == 'web' %}<span class="src">(web)</span>{% endif %}</td>
        <td class="num">{{ h.rating }}</td>
        <td class="num">{{ h.wins }}</td>
        <td class="num">{{ h.losses }}</td>
        <td class="num">{{ h.games }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Još nema odigranih borbi. Rang-lista se puni kako djeca igraju.</p>
  {% endif %}

  <h2 style="font-size:16px; margin: 26px 0 4px;">Zabilježeni dvoboji</h2>
  <p class="sub">Konkretni ishodi sa razlogom. Kad se isti dvoboj ponovi, Idriz čita odavde i ne pita LLM ponovo.</p>
  {% if matchups %}
  <table>
    <thead>
      <tr><th>Pobjednik</th><th>Gubitnik</th><th>Razlog</th><th class="num">Puta</th></tr>
    </thead>
    <tbody>
      {% for m in matchups %}
      <tr>
        <td><strong>{{ m.winner }}</strong></td>
        <td>{{ m.loser }}</td>
        <td>{{ m.reason }}</td>
        <td class="num">{{ m.count }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="empty">Još nema zabilježenih dvoboja.</p>
  {% endif %}

  {% if heroes or matchups %}
  <form method="post" onsubmit="return confirm('Obrisati sve zapamćene jačine i dvoboje? Ovo se ne može poništiti.');" style="margin-top:18px;">
    <input type="hidden" name="action" value="reset">
    <button type="submit" class="danger">Obriši pamćenje</button>
  </form>
  {% endif %}
{% endblock %}