{% extends "base.html" %}
{% block title %}Activity Log{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Activity Log</h1>
  <p>Last 200 lines from tracking/campaign.log</p>
</div>

<div class="page-content">
  <div class="card">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <span>campaign.log</span>
      <a href="/log" class="btn btn-outline btn-sm">Refresh</a>
    </div>
    <div class="card-body" style="padding:0;">
      <div class="terminal" style="height:600px;">
        {% if lines %}
          {% for line in lines %}<span {% if 'ERROR' in line or 'error' in line %}class="t-err"{% elif '✓' in line or 'Sent' in line %}style="color:#7ACF7A"{% elif 'DRY' in line %}class="t-gold"{% elif '─' in line %}class="t-dim"{% endif %}>{{ line }}</span>{% endfor %}
        {% else %}
          <span class="t-dim">No activity log yet. Send your first campaign to see logs here.</span>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Scroll to bottom on load
  window.addEventListener('load', () => {
    const term = document.querySelector('.terminal');
    if (term) term.scrollTop = term.scrollHeight;
  });
</script>
{% endblock %}