{% extends "oscar/customer/baseaccountpage.html" %}
{% load i18n %}

{% block tabcontent %}

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="{% url 'customer:notifications-inbox' %}" class="nav-link{% if list_type == 'inbox' %} active{% endif %}">{% trans 'Inbox' %}</a>
        </li>
        <li class="nav-item">
            <a href="{% url 'customer:notifications-archive' %}" class="nav-link{% if list_type == 'archive' %} active{% endif %}">{% trans 'Archive' context 'noun' %}</a>
        </li>
    </ul>

    {% if notifications %}
        {% include "oscar/partials/pagination.html" %}

        <form action="{% url 'customer:notifications-update' %}" method="post">
            {% csrf_token %}
            <table class="table table-striped table-bordered">
                <tbody>
                    {% for notification in notifications %}
                        <tr>
                            <td>
                                <input type="checkbox" name="selected_notification"
                                value="{{ notification.id }}"/>
                            </td>
                            <td>
                                {% if notification.is_read %}
                                    <i class="fas fa-inbox"></i>
                                {% else %}
                                    <i class="fas fa-envelope"></i>
                                {% endif %}
                            </td>
                            <td>
                                {% if notification.is_read %}
                                    {{ notification.subject|safe }}
                                {% else %}
                                    <strong>{{ notification.subject|safe }}</strong>
                                {% endif %}
                                <br/>
                                <em>{{ notification.date_sent }}</em>
                            </td>
                            <td>
                                <a href="{% url 'customer:notifications-detail' pk=notification.pk %}" class="btn btn-info btn-sm">{% trans 'View' %}</a>
                                {% if list_type == 'inbox' %}
                                    <a class="btn btn-success btn-sm" href="#" data-behaviours="archive">{% trans 'Archive' context 'verb' %}</a>
                                {% endif %}
                                <a class="btn btn-danger btn-sm" href="#" data-behaviours="delete">{% trans 'Delete' %}</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% trans "With selected items:" %}
            {% if list_type == 'inbox' %}
                <button type="submit" class="btn btn-success" name="action" value="archive" data-loading-text="{% trans 'Archiving...' %}">{% trans "Archive" context 'verb' %}</button>
            {% endif %}
            <button type="submit" class="btn btn-danger" name="action" value="delete" data-loading-text="{% trans 'Deleting...' %}">{% trans "Delete" %}</button>
        </form>

        {% include "oscar/partials/pagination.html" %}

    {% else %}
        <p class="mt-3">{% trans "There are no notifications to display." %}</p>
    {% endif %}

{% endblock tabcontent %}

{% block onbodyload %}
    {{ block.super }}
    oscar.notifications.init();
{% endblock %}
