{% load humanize %}
{% load notification_tags %}
{% comment %}
  REP_LIVE_SESSION_STARTING — countdown card with prominent Join now button.

  Expects on notification.data:
    - course_title:   string
    - session_title:  string
    - session_id:     int
    - course_slug:    string
    - starts_at:      ISO 8601 string
    - minutes_until:  int (snapshot at notification time)

  notification.action_url is the canonical session_join URL; the
  notification_go redirect path marks the row read on click.
{% 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 %}
  {# Live-now / starting-soon accent rail. ≤5 min gets the live-pulse green. #}
  {% if d.minutes_until <= 5 %}
  <span class="absolute inset-y-0 left-0.5 w-0.5" style="background: oklch(0.62 0.16 145);" 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" }}
        </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 tabular-nums text-ruforum-text-muted" role="status" aria-live="polite">
          {% if d.minutes_until <= 0 %}
            <span class="font-semibold" style="color: oklch(0.40 0.15 145);">Live now — join immediately</span>
          {% elif d.minutes_until == 1 %}
            <span class="font-semibold text-ruforum-text">Starts in 1 minute</span>
          {% elif d.minutes_until <= 5 %}
            <span class="font-semibold text-ruforum-text">Starts in {{ d.minutes_until }} minutes</span>
          {% else %}
            Starts in {{ d.minutes_until }} minutes
          {% endif %}
          {% if d.starts_at %}
            · <time datetime="{{ d.starts_at }}" title="{{ d.starts_at }}">scheduled time</time>
          {% endif %}
        </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-primary btn-sm"
       aria-label="Join the live session for {{ d.session_title|default:'this session' }}">
      {% if d.minutes_until <= 0 %}Join now{% else %}Join{% endif %}
    </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 %}