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

<div class="dropdown" id="notification-controller">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" v-on:click="view_all()">
    {{ 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 %}
    <i class="fa fa-fw fa-bell-o"></i>
  </a>
  <input type="hidden" name="user" id="user_musette" value="{{user.id}}" />
  <ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">

    <div class="notification-heading">
        <h4 class="menu-title">{% trans "Notifications" %}</h4>
        <h4 class="menu-title pull-right">
            <a href="{% url 'profile' user.username %}">
            <strong>{{ user.username }}</strong> <i class="fa fa-user"></i>
            </a>
        </h4>
    </div>
    
    <div class="notifications-wrapper">
        {% comment %} Real time notification with Vue.js {% endcomment %}
        {% verbatim %}
          <!-- Url fixed for verbatim -->
          <span v-for="not in notifications_socket">
            <li class="divider"></li>
            <a class="content" v-bind:href="'/topic/' + not.category + '/' + not.forum + '/' + not.slug + '/' + not.idtopic">
                <h4 class="item-title">
                    <img class="img-circle pull-left" v-bind:src="not.photo" width=45 height=45 />
                </h4>
                <h5><a v-bind:href="'/topic/' + not.category + '/' + not.forum + '/' + not.slug + '/' + not.idtopic"><u>{{ not.topic }}</u></a></h5>
                <p class="item-info"><a v-bind:href="'/profile/' + not.username">{{ not.username }}</a> - {% endverbatim %} {% trans "Now" %} {% verbatim %}</p>
            </a>
          </span>
        {% endverbatim %}
        {% for notification in notifications|slice:"5" %}
            {% if forloop.first %}
            <li class="divider"></li>
            {% endif %}
            {{notification|get_item_notification|safe}}
            {% if not forloop.last %}
            <li class="divider"></li>
            {% endif %}
        {% empty %}
            <center>
                <p>{% trans "You have no notifications"%}</p>
            </center>
        {% endfor %}
     </div>
    <li class="divider"></li>
    <div class="notification-footer">
        <h4 class="menu-title" class="pull-left">
            <a href="{% url 'forum_all_notification' %}">
            <strong><span>{% trans "All" %} </span><i class="fa fa-arrow-circle-right"></i></strong>
            </a>
        </h4>
        <a href="{% url 'logout' %}" class="pull-right"><strong><i class="fa fa-sign-out" aria-hidden="true"></i> {% trans "Logout" %}</strong></a>
    </div>
  </ul>

</div>

