Prettify and explain better document list

costs/templates/costs/documents_list.html

@@ -1,12 +1,36 @@
 {% extends "costs/base.html" %}
 
+{% block rail %}
+  <div class="ui segment" style="width: 100%">
+    <a class="ui ribbon left label">Notes</a>
+    <p>
+    Ces documents peuvent représenter :
+    </p>
+    <ul>
+      <li>
+des <span class="ui label small">relevés</span> de nombre abonnements et de
+  coûts facturés sur une période passée
+      </li>
+      <li>
+des <span class="ui label small orange">scénarios/estimations</span>
+  utilisées à des fins de  planification.
+      </li>
+    </ul>
+  </div>
+
+{% endblock %}
+
 {% block content %}
 {% if documents.count > 0 %}
 <ul>
 {% for doc in documents %}
   <li>
     <a href="{{ doc.get_absolute_url }}">{{ doc.name }}</a>
-    ({{ doc.date|date:"M Y" }}, {{ doc.service_set.count }} services)
+    ({{ doc.date|date:"M Y" }}, {{ doc.service_set.count }} service{{ doc.service_set.count|pluralize }})
+    <span class="ui label
+         {% if doc.type == doc.TYPE_PLAN %} orange {% endif %}">
+      {{ doc.get_type_display }}
+    </span>
   </li>
 
 {% endfor %}