{% extends 'iconolab_base.html' %}

{% load staticfiles %}

{% load thumbnail %}

{% load iconolab_tags %}

{% load notifications_tags %}

{% block content %}
  <div id="user-profile-block" class="row" style="border: 1px solid gray; padding-top:15px;">
    <div class="col-md-12">
      <div class="panel panel-default" style="padding-bottom: 10px; padding-left:10px; padding-right: 10px;">
          <h3>Mes notifications: </h3>
          {% if notifications %}
            <ul class="list-group">
            {% for notification in notifications %}
              <a  
                {% if notification.target and notification.action_object %}
                  {% with notification.target as annotation %}
                    class="list-group-item {% if notification.id in notifications_unread_ids %}list-group-item-info{% endif %}"
                    {% if notification.action_object.get_comment_page %}
                    href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}?page={{notification.action_object.get_comment_page}}#c{{notification.action_object.id}}"
                    {% else %}
                    href="{% url 'revision_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid notification.action_object.revision_guid %}"
                    {% endif %}
                  {% endwith %}
                {% else %}
                  class="list-group-item disabled {% if forloop.counter > 5 %}hide-on-load{% endif %}"
                {% endif %}>
                <b>{{notification.actor.username}}</b> {{notification.verb}} <small> - {{notification.timesince}}</small>
              </a>
            {% endfor %}
            </ul>
            
            {% if notifications.has_previous or notifications.has_next %}
            <ul class="pagination pull-right">
              {% if notifications.has_previous %}
              <li>
                <a href="{% url 'user_notifications' %}?page={{notifications.previous_page_number}}" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              {% endif %}
              {% for page in notifications.paginator.page_range %}
                <li id="page-link-{{page}}" class="pagination-link {% if page == notifications.number %}active{% endif %}">
                  <a {% if page != notifications.number %}href="{% url 'user_notifications' %}?page={{page}}"{% endif %}>{{page}}</a>
                </li>
              {% endfor %}
              {% if notifications.has_next %}
              <li>
                <a href="{% url 'user_notifications' %}?page={{notifications.next_page_number}}" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              {% endif %}
            </ul>
            {% endif %}
          {% endif %}
      </div>
    </div>
  </div>
{% endblock %}