{% 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;">
    <div class="col-md-12">
      
      <h3>{% if profile_user == request.user %}Mon espace:{% else %}Profil: {% endif %} {{profile_user.username}}</h3>
      <div class="panel panel-default" style="padding-left: 10px; padding-right: 10px;">
        {% if profile_user == request.user %}
        {% notifications_unread as unread_count %}
        <h4><span class="badge notif-badge {% if unread_count %}badge-error{% endif %}">{{unread_count}}</span> Notifications non lues 
          <a href="{% url 'user_notifications' %}" class="btn btn-default btn-xs">Voir toutes mes notifications</a>
          <a href="{% url 'user_home' profile_user.id %}?clear_notifications=True" class="btn btn-default btn-xs">Tout marquer comme lu</a>
        </h4>
        <div class="row">
          <div class="col-md-12">
            {% if notifications %}
              <ul class="list-group">
              {% for notification in notifications.unread %}
                <a  
                  {% if notification.target and notification.action_object %}
                    {% with notification.target as annotation %}
                      class="list-group-item list-group-item-info {% if forloop.counter > 5 %}hide-on-load{% 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>
                {% if forloop.counter == 5 %}
                  <a class="list-group-item show-all-notifications" title="Montrer autres notifications"> ... </a>
                {% endif %}
              {% endfor %}
              </ul>
            {% endif %}
            <hr>
          </div>
        </div>
        {% endif %}
        <div class="row">
          <div class="col-md-6">
            <h4>{% if profile_user == request.user %}Mes annotations:{% else %}Annotations de {{profile_user.username}}{% endif %} </h4>
            <ul class="list-inline">
            {% if not user_annotations %}
              Aucune annotation à afficher
            {% endif %}
            {% for annotation in user_annotations.all %}
            <li>
              <div class="panel panel-default" style="min-width: 375px;">
                  <div class="panel-heading">{{annotation.current_revision.title}}</div>
                  <div class="fragment-container" style="position:relative; display:inline-block">
                    {% thumbnail annotation.image.media "150x150" crop=False as im %}
                      <a href="{% url 'annotation_detail' annotation.image.item.collection.name annotation.image.image_guid annotation.annotation_guid %}">
                        <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                        <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
                          <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
                            <path d="{{ annotation.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
                          </g>
                        </svg>
                      </a>
                    {% endthumbnail %}
                  </div>
                  <div class="annotation-detail" style="display:inline-block; position:relative; margin-right: 15px;">
                    <dl class="dl-horizontal">
                      <dt>Commentaires: </dt>
                      <dd><span class="badge">{{annotation.stats.comments_count}}</span></dd>
                      <dt>Révisions en attente:</dt>
                      <dd><span class="badge {% if annotation.stats.awaiting_revisions_count > 0 %}badge-warning{% endif %}">{{annotation.stats.awaiting_revisions_count}}</span></dd>
                    </dl>
                  </div>
              </div>
            </li>
            {% endfor %}
            </ul>
          </div>
          <div class="col-md-6">
            <h4>{% if profile_user == request.user %}Mes autres contributions:{% else %}Contributions de {{profile_user.username}}{% endif %} </h4>
            <dl>
              <dt>
              {% if profile_user == request.user %}
                Annotations sur lesquelles j'ai commenté:
              {% else %}
                Annotations sur lesquelles {{profile_user.username}} a commenté:
              {% endif %}
              </dt>
              <dd>{{user_comments_annotations.all}}</dd>
              <dt>
              {% if profile_user == request.user %}
                Annotations sur lesquelles j'ai proposé des révisions
              {% else %}
                Annotations sur lesquelles {{profile_user.username}} a proposé des révisions:
              {% endif %} 
              </dt>
              <dd>{{user_revisions_annotations.all}}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  <script>
  	$(".hide-on-load").hide()
  	$(".show-all-notifications").click(function(){
  	  	$(".show-all-notifications").hide();
  	    $(".hide-on-load").slideDown();
  	})
  </script>
{% endblock %}