{% load humanize %}
{% load notification_tags %}
{% if notification.verb == "rep_live_session_starting" %}
  {% include "notifications/partials/_verb_rep_live_session_starting.html" %}
{% elif notification.verb == "rep_live_recording_ready" %}
  {% include "notifications/partials/_verb_rep_live_recording_ready.html" %}
{% else %}
{% if notification.action_url %}
<a href="{% url 'core:notification_go' notification.pk %}"
   class="group flex items-start gap-4 px-5 py-4 transition-colors hover:bg-ruforum-warm-hover {% if not notification.is_read %}bg-ruforum-surface/60{% endif %}">
{% else %}
<div class="flex items-start gap-4 px-5 py-4 {% if not notification.is_read %}bg-ruforum-surface/60{% endif %}">
{% endif %}

  {# Verb icon #}
  {% notification_icon notification.verb %}

  {# Content #}
  <div class="min-w-0 flex-1">
    <p class="text-sm leading-snug {% if not notification.is_read %}font-semibold text-ruforum-text{% else %}text-ruforum-text-muted{% endif %}">
      {{ notification.message }}
    </p>
    <p class="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-ruforum-text-muted">
      {% notification_module_chip notification.verb %}
      <span class="font-meta">{{ notification.get_verb_display }}</span>
      <span aria-hidden="true" class="text-ruforum-border-strong">·</span>
      <time class="font-meta tabular-nums" datetime="{{ notification.created_at|date:'c' }}" title="{{ notification.created_at|date:'j M Y, H:i' }}">{{ notification.created_at|smart_time }}</time>
    </p>
  </div>

  {# Trailing action #}
  <div class="flex shrink-0 items-center gap-3 self-center">
    {% if notification.action_url %}
    <span class="hidden font-meta text-xs font-semibold text-ruforum-primary sm:inline-block sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100">View</span>
    <svg class="h-4 w-4 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
    </svg>
    {% elif 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">
        <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>

{% if notification.action_url %}
</a>
{% else %}
</div>
{% endif %}
{% endif %}