{% load humanize %}
{% load notification_tags %}
{% comment %}
  REP_LIVE_RECORDING_READY — Watch recording button.

  Expects on notification.data:
    - course_title, session_title, recording_id, session_id, course_slug.

  notification.action_url is the auth-gated recording_play proxy URL.
{% endcomment %}
{% with d=notification.data %}
<div class="relative flex flex-wrap items-center gap-4 px-5 py-4 {% if not notification.is_read %}bg-ruforum-surface/60{% endif %}">
  {% if not notification.is_read %}
  <span class="absolute inset-y-0 left-0 w-0.5 bg-ruforum-primary" aria-hidden="true"></span>
  {% endif %}

  {% notification_icon notification.verb %}

  <div class="min-w-0 flex-1">
    <div class="flex items-start justify-between gap-4">
      <div class="min-w-0">
        <p class="font-meta text-[10px] uppercase tracking-[0.14em] text-ruforum-text-muted">
          {{ d.course_title|default:"Live session recording" }}
        </p>
        <p class="mt-0.5 font-display text-base font-semibold leading-snug text-ruforum-text">
          {{ d.session_title|default:notification.message|truncatechars:80 }}
        </p>
        <p class="mt-1 font-meta text-xs text-ruforum-text-muted">
          Recording available · <time datetime="{{ notification.created_at|date:'c' }}">{{ notification.created_at|naturaltime }}</time>
        </p>
      </div>
      {% if not notification.is_read %}
      <span class="mt-0.5 shrink-0 rounded-full bg-ruforum-primary/10 px-2 py-0.5 font-meta text-[10px] font-semibold uppercase tracking-[0.1em] text-ruforum-primary">New</span>
      {% endif %}
    </div>
  </div>

  <div class="flex shrink-0 items-center gap-2 self-center">
    {% if notification.action_url %}
    <a href="{% url 'core:notification_go' notification.pk %}"
       class="btn-secondary btn-sm"
       aria-label="Watch the recording for {{ d.session_title|default:'this session' }}">
      Watch recording
    </a>
    {% endif %}
    {% if not notification.is_read %}
    <form method="post" action="{% url 'core:notification_mark_read' notification.pk %}">
      {% csrf_token %}
      <button type="submit" class="inline-flex items-center gap-1.5 rounded-lg border border-ruforum-border bg-white px-2.5 py-1.5 font-meta text-xs font-medium text-ruforum-text transition-colors hover:bg-ruforum-warm-hover focus:outline-none focus:ring-2 focus:ring-ruforum-primary focus:ring-offset-1"
              aria-label="Mark notification as read">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
        </svg>
        Mark read
      </button>
    </form>
    {% endif %}
  </div>
</div>
{% endwith %}