{% load i18n %}
{% comment %}
    One M7 notification row -- included from notifications.html once per day
    bucket. Expects ``row`` ({notification, source_label}) in scope. The
    whole row is the tap target (a submit button styled full-width, since a
    POST form can't wrap another form/link) -- tapping always marks it read,
    and also navigates to the linked News/Event when its source resolves to
    one (see mobile.views._notification_source_link and
    NotificationsView.post). A club-coloured bar marks it unread -- full
    height via self-stretch, same technique as mobile/_calendar_row.html's
    own kind marker, so it still spans the row now that the body text below
    is shown in full (no truncatechars) and can wrap to several lines. The
    timestamp is stacked time-over-date (like _calendar_row.html's own
    day/date column) rather than a relative "X ago" string -- that can run
    long ("1 hour, 20 minutes ago") and eats into the body text's width now
    that it's no longer truncated.
{% endcomment %}
<form method="post" action="{% url "mobile:notifications" %}" hx-boost="false">
    {% csrf_token %}
    <input type="hidden" name="action" value="mark_read">
    <input type="hidden" name="notification_id" value="{{ row.notification.pk }}">
    <button type="submit" class="m-card flex w-full items-center gap-3 p-3.5 text-left">
        <span class="w-[3px] shrink-0 self-stretch rounded-full {% if not row.notification.read_at %}bg-club{% else %}bg-line{% endif %}"></span>
        <span class="min-w-0 flex-1">
            <span class="block text-sm font-semibold text-ink">{{ row.notification.title }}</span>
            <span class="block text-xs text-muted">{{ row.notification.body }}</span>
            {% if row.source_label %}<span class="block font-display text-[11px] font-extrabold text-club uppercase tracking-wide">{{ row.source_label }}</span>{% endif %}
        </span>
        <span class="w-11 shrink-0 text-right">
            <span class="block font-mono text-[11px] text-dim">{{ row.notification.created|date:"H:i" }}</span>
            <span class="block font-mono text-[10px] text-dim">{{ row.notification.created|date:"d M" }}</span>
        </span>
    </button>
</form>