{# Recent Activity Partial (Bootstrap 5) #}

<div class="d-flex flex-column gap-2">
  {% if recent_detections or recent_ad_breaks %}

    {# Detections (limit 5) #}
    {% for detection in recent_detections|slice:":5" %}
      <div class="d-flex align-items-start gap-3 p-3 rounded bg-light border">
        <div class="flex-shrink-0">
          <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
               style="width:32px;height:32px;background:#a78bfa;">
            <i class="fas fa-music text-white" style="font-size:12px;"></i>
          </div>
        </div>
        <div class="flex-grow-1">
          <p class="mb-0 small fw-semibold text-dark">Jingle Detected</p>
          <p class="mb-0 small text-muted">
            {{ detection.template.name }} on {{ detection.session.channel.name }}
          </p>
          <p class="mb-0 small text-muted">
            {{ detection.detection_time|timesince }} ago
            <span class="badge rounded-pill bg-purple-subtle text-dark ms-2"
                  style="background:#f3e8ff;">
              {{ detection.confidence_score|floatformat:3 }}
            </span>
          </p>
        </div>
      </div>
    {% endfor %}

    {# Ad breaks (limit 3) #}
    {% for ad_break in recent_ad_breaks|slice:":3" %}
      <div class="d-flex align-items-start gap-3 p-3 rounded bg-light border">
        <div class="flex-shrink-0">
          <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
               style="width:32px;height:32px;background:#f59e0b;">
            <i class="fas fa-ad text-white" style="font-size:12px;"></i>
          </div>
        </div>
        <div class="flex-grow-1">
          <p class="mb-0 small fw-semibold text-dark">
            {% if ad_break.end_time %}Ad Break Completed{% else %}Ad Break Started{% endif %}
          </p>
          <p class="mb-0 small text-muted">
            {{ ad_break.channel_name }}
            {% if ad_break.duration_seconds %} - {{ ad_break.duration_seconds }}s{% endif %}
          </p>
          <p class="mb-0 small text-muted">
            {{ ad_break.start_time|timesince }} ago
            <span class="badge rounded-pill ms-2
              {% if ad_break.status == 'completed' %}bg-success-subtle text-success
              {% else %}bg-warning-subtle text-warning{% endif %}">
              {{ ad_break.status|title }}
            </span>
          </p>
        </div>
      </div>
    {% endfor %}

    {# View all link #}
    <div class="pt-3 border-top">
      <a href="{% url 'jingles:detection_list' %}"
         class="small text-primary text-decoration-none fw-semibold">
        <i class="fas fa-arrow-right me-1"></i> View all activity
      </a>
    </div>

  {% else %}
    {# Empty state #}
    <div class="text-center py-4">
      <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-light mb-2"
           style="width:48px;height:48px;">
        <i class="fas fa-clock text-muted"></i>
      </div>
      <p class="small text-muted mb-0">No recent activity</p>
      <p class="text-muted-50 small mb-0">Activity will appear here when streams are active</p>
    </div>
  {% endif %}
</div>