{% extends "oscar/communication/notifications/list.html" %}
{% load i18n %}

{% block tabcontent %}
{% if notifications %}
<form action="{% url 'customer:notifications-update' %}" method="post">
    {% csrf_token %}
    <div class="notification-tabs">
        {% if list_type == 'inbox' %}
        <button type="submit" class="btn btn-primary" name="action" value="archive" >{% trans 'Archive' context 'verb' %}</button>
        {% endif %}
        <button type="submit" class="btn btn-danger" name="action" value="delete" >{% trans 'Delete' %}</button>
    </div>

    <div class="notifications-wrapper">
        {% for notification in notifications %}
        <div class="notification tabcontent-item {% if notification.is_read %}is_read{% endif %}">
            <div class="row">
                <div class="col-lg-1 notification-checkbox-wrapper">
                    <input id="not-{{ notification.pk }}" class="notification-input" type="checkbox" name="selected_notification" value="{{ notification.id }}"/>
                    <label for="not-{{ notification.pk }}" class="notification-checkbox">
                    </label>

                </div>
                <div class="col-lg-11">
                    <a href="{% url 'customer:notifications-detail' pk=notification.pk %}" class="notification-title">
                    {% if not notification.is_read %}
                    <b>{{ notification.subject|safe }}</b>
                    {% else %}
                    {{ notification.subject|safe }}
                    {% endif %}
                    </a>
                    <small class="notification-date text-muted">{{ notification.date_sent }}</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</form>
{% include "oscar/partials/pagination.html" %}
{% else %}
<p class="mt-3">{% trans "There are no notifications to display." %}</p>
{% endif %}
{% endblock tabcontent %}