{% extends 'settings/notifications/master.twig' %}

{% set mode = 'History' %}

{% block description %}
    <p>The history of notifications that have been sent to you.</p>
{% endblock %}

{% set alerts = user.notifications(0, false)|batch(10) %}

{% set paginationPages = alerts %}
{% set paginationUrl %}{{ route('settings.notifications.history') }}{% endset %}

{% block css %}
    <style type="text/css">
        .pagination {
            float: right;
        }
    </style>
{% endblock %}

{% block settingsContent %}
    {% if alerts %}
        <div class="notification-history">
            {% for alert in alerts[get.page|default(1) - 1] %}
            <a id="notif-hist-{{ alert.id }}" class="clean {% if alert.read %}read{% endif %}"{% if alert.link %} href="{{ alert.link }}"{% endif %}>
                <div class="notif-hist-icon">
                {% if 'FONT:' in alert.image %}
                    <div class="font-icon fa {{ alert.image|replace({'FONT:': ''}) }} fa-4x"></div>
                {% else %}
                    <img src="{{ alert.image }}" alt="Notification">
                {% endif %}
                </div>
                <div class="notif-hist-content">
                    <div class="notif-hist-inside">
                        <div class="notif-hist-title">
                            {{ alert.title }}
                        </div>
                        <div class="notif-hist-text">
                            {{ alert.title }}
                        </div>
                    </div>
                    <div class="notif-hist-time">
                        <time class="time-ago" datetime="{{ alert.time|date('r') }}">{{ alert.time|date(config('general.date_format')) }}</time>
                    </div>
                </div>
                <div class="clear"></div>
            </a>
            {% endfor %}
        </div>
        {% if alerts|length > 1 %}
            <div>
                {% include 'elements/pagination.twig' %}
            </div>
        {% endif %}
    {% else %}
        <h1 class="stylised" style="margin: 2em auto; text-align: center;">You don't have any notifications in your history!</h1>
    {% endif %}
{% endblock %}