{% load i18n %}
{% comment %}
    One M7 notification row -- included from notifications.html once per day
    bucket. Expects ``row`` ({notification, news_item}) 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 item when there is one (see
    NotificationsView.post). A club-coloured bar marks it unread, same
    treatment as management/templates/management/home.html's own
    notifications card.
{% endcomment %}
<form method="post" action="{% url "mobile:notifications" %}">
    {% 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="h-8.5 w-1.5 shrink-0 rounded-sm {% 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 truncate text-xs text-muted">{{ row.notification.body|truncatechars:120 }}</span>
            {% if row.news_item %}<span class="block font-display text-[11px] font-extrabold text-club uppercase tracking-wide">{% trans "Club news" %}</span>{% endif %}
        </span>
        <span class="shrink-0 font-mono text-[11px] text-dim">{% blocktrans with time=row.notification.created|timesince %}{{ time }} ago{% endblocktrans %}</span>
    </button>
</form>