{% load bookwyrm_tags %}
{% related_status notification as related_status %}
<div class="box is-shadowless has-background-white-ter {% if notification.id in unread %} is-primary{% endif %}">
    <div class="columns is-mobile">
        <div class="column is-narrow is-size-3 {% if notification.id in unread%}has-text-white{% else %}has-text-grey{% endif %}">
            <a class="has-text-dark" href="{% block primary_link %}{% endblock %}">
                {% block icon %}{% endblock %}
            </a>
        </div>

        <div class="column is-clipped">
            <div class="block content">
                <p>
                    {% if notification.related_user %}
                        <a href="{{ notification.related_user.local_path }}">{% include 'snippets/avatar.html' with user=notification.related_user %}
                            {{ notification.related_user.display_name }}</a>
                    {% endif %}
                    {% block description %}{% endblock %}
                </p>
            </div>

            {% if related_status %}
            <div class="block">
                {% block preview %}{% endblock %}
            </div>
            {% endif %}
        </div>
    </div>
</div>