{% if not log %}
<div class="empty">awaiting first generated log</div>
{% else %}
{# tone / analysis / prompt_version / model / tokens / cost / generated_at
   are admin metadata. Hidden from the user-facing UI; available via the
   JSON API and the AICall ledger. The panel header's "generated hourly @
   :20 UTC" cadence message communicates freshness. #}
<div class="log-content"
     title="Last generated {{ log.generated_at.strftime('%Y-%m-%d %H:%M UTC') }}">
  {{ log.content_html | safe | glossary(tone) }}
</div>

{% if log.feedback %}
{# Anonymous-in-UI thumb up/down. Server stores (user, log, vote) for dedup
   so a vote can be flipped; UI shows aggregate counts only.
   POST clicks JSON-fetch and swap this partial back in place — no full
   reload, the log content stays put. #}
<div class="log-feedback" id="log-feedback-{{ log.id }}"
     data-log-id="{{ log.id }}"
     style="display:flex; align-items:center; gap:14px; margin-top:18px;
            padding-top:14px; border-top:1px solid var(--border);
            font-size:13px; color:var(--muted);">
  <span>Was this useful?</span>
  <button type="button" class="log-feedback__btn log-feedback__btn--up"
          data-vote="up"
          aria-pressed="{{ 'true' if log.feedback.user_vote == 'up' else 'false' }}"
          title="Helpful"
          style="background:none; border:1px solid var(--border);
                 padding:4px 10px; border-radius:4px; cursor:pointer;
                 {% if log.feedback.user_vote == 'up' %}background:var(--accent-bg, #eef);
                 border-color:var(--accent);{% endif %}">
    👍 <span class="log-feedback__count">{{ log.feedback.up }}</span>
  </button>
  <button type="button" class="log-feedback__btn log-feedback__btn--down"
          data-vote="down"
          aria-pressed="{{ 'true' if log.feedback.user_vote == 'down' else 'false' }}"
          title="Not useful"
          style="background:none; border:1px solid var(--border);
                 padding:4px 10px; border-radius:4px; cursor:pointer;
                 {% if log.feedback.user_vote == 'down' %}background:var(--accent-bg, #fee);
                 border-color:var(--accent);{% endif %}">
    👎 <span class="log-feedback__count">{{ log.feedback.down }}</span>
  </button>
  <span class="log-feedback__status" aria-live="polite"
        style="font-size:12px; opacity:0.7;"></span>
</div>
<script>
(function () {
  var root = document.getElementById('log-feedback-{{ log.id }}');
  if (!root || root.dataset.wired) return;
  root.dataset.wired = '1';
  var logId = root.dataset.logId;
  var statusEl = root.querySelector('.log-feedback__status');
  root.querySelectorAll('.log-feedback__btn').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      var currentlyPressed = btn.getAttribute('aria-pressed') === 'true';
      // Clicking the already-pressed vote clears it (toggle off).
      var vote = currentlyPressed ? 'clear' : btn.dataset.vote;
      statusEl.textContent = '…';
      try {
        var r = await fetch('/api/log/' + logId + '/feedback', {
          method: 'POST',
          headers: {'content-type': 'application/json'},
          body: JSON.stringify({vote: vote}),
          credentials: 'same-origin',
        });
        if (!r.ok) throw new Error('Vote failed: ' + r.status);
        var data = await r.json();
        // Update counts + pressed state in place. Server is source of truth.
        var upBtn = root.querySelector('.log-feedback__btn--up');
        var downBtn = root.querySelector('.log-feedback__btn--down');
        upBtn.querySelector('.log-feedback__count').textContent = data.up;
        downBtn.querySelector('.log-feedback__count').textContent = data.down;
        upBtn.setAttribute('aria-pressed', data.user_vote === 'up' ? 'true' : 'false');
        downBtn.setAttribute('aria-pressed', data.user_vote === 'down' ? 'true' : 'false');
        statusEl.textContent = 'thanks';
        setTimeout(function () { statusEl.textContent = ''; }, 1800);
      } catch (e) {
        statusEl.textContent = 'could not save';
      }
    });
  });
})();
</script>
{% endif %}
{% endif %}