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

{% block tabcontent %}

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

    <div class="tab-content">
        <div class="tab-pane fade show active p-2">
            {% if notifications %}
                {% include "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="icon-inbox"></i>
                                        {% else %}
                                            <i class="icon-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 "partials/pagination.html" %}

            {% else %}
                <p>{% trans "There are no notifications to display." %}</p>
            {% endif %}
        </div>
    </div>

{% endblock tabcontent %}

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