{% load i18n %}
{% load forum_tags %}

<li class="dropdown" ng-controller="NotificationController">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" ng-click="view_all()">
    <i class="fa fa-fw fa-bell-o"></i> {{ user.username }} 
    {% if user.id|get_pending_notifications > 0 %}
      <span id="badge_notifications" class="badge">{{user.id|get_pending_notifications}}</span>
    {% else %}
      <span id="badge_notifications" class="badge hide"></span>
    {% endif %}
  </a>
  <input type="hidden" ng-model="user" name="user" id="user_musette" value="{{user.id}}" />
  <ul class="dropdown-menu" role="menu" style="width: 30em">
    {% comment %} Real time notification with angular {% endcomment %}
    {% verbatim %}
      <li class="item-notification" ng-repeat="not in notifications_socket">
          <span class="item">
              <span class="item-left">
            <div class="list-group">
                <div class="list-group-item">
                  <div class="row-action-primary">
                    <div>
                      <img ng-src="{{ not.photo }}" width="20" height="20" class="img-circle">
                    </div>
                  </div>
                  <div class="row-content">
                    <div class="least-content"></div>
                    <h4 class="list-group-item-heading"></h4>
                    <h5><a href="/topic/{{ not.forum }}/{{not.slug}}/{{not.idtopic}}/">
                      <u>{{ not.topic }}</u></a></h5>
                      <p class="list-group-item-text"></p><p class="black">{{ not.description | htmlToPlaintext }}</p>
                      <p><a href="/profile/{{ not.username }}"> {{ not.username }} </a></p>
                      {% endverbatim %}<p class="black"> {% trans "Now" %}</p> {% verbatim %}
                    </div>
                </div>
                <div class="list-group-separator"></div>
            </div>

              </span>
          </span>
      </li>
    {% endverbatim %}
    <li>
      {% for notification in notifications|slice:"5" %}
      <a href="#">
        {{notification|get_item_notification|safe}}
      </a>
      {% empty %}
        <div id="no_notifications">
            <center><p class="without-text-transform">{% trans "No notifications" %}</p></center>
            <li class="divider"></li>
        </div>
      {% endfor %}
      <li class="divider"></li>
      <li><a class="text-center" href="/forum_all_notification/">
        <span class="without-text-transform">
          <span class="glyphicon glyphicon-envelope"></span>
          {% trans "All" %}
        </span>
      </a></li>
    </li>
  </ul>
</li>
