Afegir temes coocurrents

folkugat_web/assets/templates/fragments/tema/stats.html

@@ -1,42 +1,49 @@
+<h4 class="pt-4 text-xl mt-3 text-beige">Estadístiques</h4>
+<hr class="h-px mt-1 mb-3 bg-beige border-0">
 {% if tema.stats %}
-  <h4 class="pt-4 text-xl mt-3 text-beige">Estadístiques</h4>
-  <hr class="h-px mt-1 mb-3 bg-beige border-0">
-  <div>
-    <p>
-      Aquest tema ha sigut tocat en
-      {% if tema.stats.times_played == 1%}
-        una sessió.
-      {% else %}
-        {{ tema.stats.times_played }} sessions.
-      {% endif %}
-    </p>
-    <p class="py-2">
-      S'ha tocat a les sessions següents:
-      <ol class="flex flex-col items-center justify-center">
-        {% for session in tema.stats.sessions_played %}
-        <li class="border rounded border-beige
-                    flex flex-row grow
-                    p-2 m-2 w-full max-w-xl
-                    relative">
-          <a href="/session/{{session.id}}">
-          <div class="flex flex-row grow items-center">
-            <div class="flex-1">
-              <a href="/sessio/{{session.id}}/">
-                {% set dn = date_names(session.date) %}
-                {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
-              </a>
-            </div>
-            <div class="ml-auto">
-              <a title="Més informació"
-                class="text-beige mx-1"
-                href="/sessio/{{session.id}}/">
-                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
-              </a>
-            </div>
-          </div>
-        </li>
-        {% endfor %}
-      </ol>
-    </p>
+  <div class="flex flex-col">
+    {% if tema.played_with %}
+    <div class="my-2 flex flex-row items-center">
+      <i class="mx-2 flex-none">{% include "icons/notes-small.svg" %}</i>
+      <p>
+        S'ha tocat juntament amb:
+      </p>
+    </div>
+    <ol class="ml-4 flex flex-col justify-center">
+      {% for co_tema in tema.played_with %}
+        {% set tema = co_tema.tema %}
+        {% include "fragments/tema/played_with.html" %}
+      {% endfor %}
+    </ol>
+    {% endif %}
+    <div class="my-2 flex flex-row items-center">
+      <i class="mx-2 flex-none">{% include "icons/music-box.svg" %}</i>
+      <p>
+        S'ha tocat en
+        {% if tema.stats.times_played == 1%}
+          una sessió:
+        {% else %}
+          {{ tema.stats.times_played }} sessions:
+        {% endif %}
+      </p>
+    </div>
+    <ol class="ml-4 flex flex-col justify-center">
+      {% for session in tema.stats.sessions_played %}
+      <li class="flex flex-row grow
+                 my-1">
+        <a class="flex flex-row grow items-center"
+           href="/sessio/{{session.id}}">
+          <i class="mx-2 text-beige flex-none">{% include "icons/calendar.svg" %}</i>
+          <p>
+            {% set dn = date_names(session.date) %} {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
+          </p>
+        </a>
+      </li>
+      {% endfor %}
+    </ol>
   </div>
+{% else %}
+<div>
+  <i>No s'ha tocat a cap jam (encara)</i>
+</div>
 {% endif %}