Initial commit

folkugat_web/assets/templates/fragments/content.html

@@ -0,0 +1,7 @@
+<div id="content">
+  <div hx-get="{{ content }}"
+      hx-trigger="load"
+      hx-target="#content"
+      hx-swap="innerHTML">
+  </div>
+</div>

folkugat_web/assets/templates/fragments/footer.html

@@ -0,0 +1,10 @@
+<div id="footer">
+  <hr class="h-px my-3 bg-beige border-0 ">
+  <div id="nota" class="flex items-center justify-center">
+    <div hx-post="/api/nota"
+        hx-trigger="load"
+        hx-target="#nota"
+        hx-swap="innerHTML">
+    </div>
+  </div>
+</div>

folkugat_web/assets/templates/fragments/header.html

@@ -0,0 +1,5 @@
+<div class="h-4/5 min-h-[400px] flex flex-col items-center justify-center">
+  <img src = "{{ url_for('static', path='img/folkugat.svg') }}" class="{% if animate %} opacity-0 animate-fade-in-one {% endif %} m-3" width="100" alt="Folkugat"/>
+  <h1 class="text-3xl sm:text-8xl text-beige m-3 {% if animate %} opacity-0 animate-fade-in-one {% endif %}">{{ page_title }}</h1>
+  <h2 class="text-center sm:text-3xl m-6 {% if animate %} opacity-0 animate-fade-in-two {% endif %}">Sessions de folk a Sant Cugat</h2>
+</div>

folkugat_web/assets/templates/fragments/marquee.html

@@ -0,0 +1,22 @@
+{% if session %}
+<div class="bg-beige text-white mt-2 py-2 text-xl overflow-hidden">
+  <a href="/sessio/{{ session.id }}">
+    <div class="animate-marquee whitespace-nowrap">
+      {% for _ in (1, 2, 3) %}
+        <span class="inline-block mx-4">
+          Sessió en directe
+        </span>
+        <span class="inline-block mx-4">
+          ♫
+        </span>
+        <span class="inline-block mx-4">
+          Està sonant <i>Pasdoble de Muntanya</i>
+        </span>
+        <span class="inline-block mx-4">
+          ♫
+        </span>
+      {% endfor %}
+    </div>
+  </a>
+</div>
+{% endif %}

folkugat_web/assets/templates/fragments/menu.html

@@ -0,0 +1,35 @@
+<hr class="h-px bg-beige border-0">
+<ul class="flex flex-col min-[450px]:flex-row items-center justify-center">
+
+  {% if menu_selected_id == Pages.Sessions %}
+  <li class="p-2 text-beige">
+    <button>
+  {% else %}
+  <li class="p-2">
+    <button hx-get="/api/content/sessions"
+            hx-replace-url="/sessions"
+            hx-target="#content">
+  {% endif %}
+      Sessions
+    </button>
+  </li>
+
+  {% if menu_selected_id == Pages.Temes %}
+  <li class="p-2 text-beige">
+    <button>
+  {% else %}
+  <li class="p-2">
+    <button hx-get="/api/content/temes"
+            hx-replace-url="/temes"
+            hx-target="#content">
+  {% endif %}
+      Temes
+    </button>
+  </li>
+
+</ul>
+<hr class="h-px bg-beige border-0">
+<div hx-get="/api/sessions/live"
+     hx-swap="innerHTML"
+     hx-trigger="load, every 20s, reload-marquee from:body">
+</div>

folkugat_web/assets/templates/fragments/nota/footer.html

@@ -0,0 +1,32 @@
+{% if logged_in %}
+
+  <button class="p-12"
+          hx-post="/api/logout"
+          hx-target="#nota">
+      😎
+  </button>
+
+{% else %}
+
+  <button class="p-12"
+          hx-get="/api/nota?value={{value or ''}}"
+          hx-target="#nota"
+          hx-swap="innerHTML"
+          hx-include="#nota-input">
+      ♫
+  </button>
+
+  {% if value %}
+    <div class="p-12">
+        {{ value }}
+    </div>
+    <button class="p-12"
+            hx-get="/api/nota?value={{value or ''}}"
+            hx-target="#nota"
+            hx-swap="innerHTML"
+            hx-include="#nota-input">
+        ♫
+    </button>
+  {% endif %}
+
+{% endif %}

folkugat_web/assets/templates/fragments/nota/input.html

@@ -0,0 +1,20 @@
+<button class="p-12"
+        hx-post="/api/nota"
+        hx-target="#nota"
+        hx-swap="innerHTML"
+        hx-include="#nota-input"
+        hx-trigger="clicked, keyup[keyCode==13] from:#nota-input">
+    ♫
+</button>
+<input id="nota-input" type="text" name="value" value="{{value or ''}}"
+        class="rounded border border-yellow-50 focus:outline-none
+               text-yellow-50 text-center
+               animate-grow max-w-xs
+               bg-brown p-1 m-1">
+<button class="p-12"
+        hx-post="/api/nota"
+        hx-target="#nota"
+        hx-swap="innerHTML"
+        hx-include="#nota-input">
+    ♫
+</button>

folkugat_web/assets/templates/fragments/nota/nota.html

@@ -0,0 +1,5 @@
+<div hx-post="/api/nota"
+     hx-trigger="load"
+     hx-target="#nota"
+     hx-swap="innerHTML">
+</div>

folkugat_web/assets/templates/fragments/pdf_viewer.html

@@ -0,0 +1,40 @@
+<!-- PDF Viewer -->
+<script type="module">
+  const pdfViewer = await import("{{ url_for('static', path='js/pdf_viewer.js') }}");
+  const options = {
+      url: '{{ pdf_url }}',
+      // PDF Canvas (where the pdf will be displayed)
+      canvas: document.getElementById('the-canvas'),
+      // Navigation elements
+      prevPage: document.getElementById('prev'),
+      nextPage: document.getElementById('next'),
+      // Page elements
+      pageCount: document.getElementById('page_count'),
+      pageNum: document.getElementById('page_num'),
+  }
+  pdfViewer.displayPdf(options);
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <!-- <div class="text-beige"> -->
+  <!--   <a href="{{ pdf_url }}" -->
+  <!--      target="_blank"> -->
+  <!--     <i class="fa fa-file-pdf" aria-hidden="true"></i> -->
+  <!--     obrir -->
+  <!--   </a> -->
+  <!-- </div> -->
+  <div class="flex flex-row flex-nowrap items-center justify-center w-full">
+    <button id="prev" class="flex-none text-xl text-beige mx-3">
+      <i class="fa fa-chevron-left" aria-hidden="true"></i>
+    </button>
+    <canvas class="flex-auto m-2 w-1/2 max-w-3xl"
+            id="the-canvas">
+    </canvas>
+    <button id="next" class="flex-none text-xl text-beige mx-3">
+      <i class="fa fa-chevron-right" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div>
+    <span><span id="page_num">?</span> / <span id="page_count">?</span></span>
+  </div>
+</div>

folkugat_web/assets/templates/fragments/sessions/live/start.html

@@ -0,0 +1,6 @@
+<button title="Inicia una sessió"
+        class="text-beige mx-1"
+        hx-put="/api/sessio/{{ session.id }}/live"
+        hx-swap="outerHTML">
+    <i class="fa fa-play" aria-hidden="true"></i>
+</button>

folkugat_web/assets/templates/fragments/sessions/live/stop.html

@@ -0,0 +1,6 @@
+<button title="Atura una sessió"
+        class="text-beige mx-1"
+        hx-delete="/api/sessio/{{ session.id }}/live"
+        hx-swap="outerHTML">
+    <i class="fa fa-stop" aria-hidden="true"></i>
+</button>

folkugat_web/assets/templates/fragments/sessions/pagina.html

@@ -0,0 +1,25 @@
+{% include "fragments/menu.html" %}
+<div class="p-12 text-center">
+  <h3 class="text-3xl text-beige p-4">Calendari</h3>
+  {% if logged_in %}
+  <button title="Afegeix una sessió"
+          class="text-beige m-2"
+          hx-post="/api/sessions/editor/"
+          hx-target="#{{ calendar_list_id }}"
+          hx-swap="beforeend transition:true">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix una sessió
+  </button>
+  {% endif %}
+  <div hx-get="/api/sessions/upcoming"
+       hx-trigger="load"
+       hx-target="this"
+       hx-swap="innerHTML">
+  </div>
+  <h3 class="text-3xl text-beige p-4">Historial</h3>
+  <div hx-get="/api/sessions/history"
+       hx-trigger="load"
+       hx-target="this"
+       hx-swap="innerHTML">
+  </div>
+</div>

folkugat_web/assets/templates/fragments/sessions/sessio.html

@@ -0,0 +1,33 @@
+{% include "fragments/menu.html" %}
+<div class="flex justify-center">
+  <div class="m-12 grow max-w-4xl text-center">
+    <h3 class="text-3xl p-4">
+        {% set dn = date_names(session.date) %}
+        {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
+    </h3>
+    {% if logged_in %}
+      {% if session.is_live %}
+        {% include "fragments/sessions/live/stop.html" %}
+      {% else %}
+        {% include "fragments/sessions/live/start.html" %}
+      {% endif %}
+    {% endif %}
+    <div class="text-left">
+      <h4 class="text-xl text-beige">Horari i lloc</h4>
+        De {{ session.start_time.strftime("%H:%M") }}
+        a {{ session.end_time.strftime("%H:%M") }}
+        {% if session.venue.name %}
+          a
+          {% if session.venue.url %}
+          <a href="{{ session.venue.url }}"
+            class="text-beige"
+            target="_blank">
+            {{ session.venue.name }}
+          </a>
+          {% else %}
+            {{ session.venue.name }}
+          {% endif %}
+        {% endif %}
+    </div>
+  </div>
+</div>

folkugat_web/assets/templates/fragments/sessions/session_date.html

@@ -0,0 +1,24 @@
+<p>
+  {% if session == None %}
+    <a> L'últim Dimecres de cada mes </a>
+  {% else %}
+    <a>
+        {% set dn = date_names(session.date) %}
+        {{ dn.day_name }} {{ dn.day }} {{ dn.month_name }}
+    </a>
+     de {{ session.start_time.strftime("%H:%M") }}
+     a {{ session.end_time.strftime("%H:%M") }}
+    {% if session.venue.name %}
+       a {{ session.venue.name }}
+      <!-- {% if session.venue.url %} -->
+      <!-- <a href="{{ session.venue.url }}" -->
+      <!--    class="text-beige" -->
+      <!--    target="_blank"> -->
+      <!--   {{ session.venue.name }} -->
+      <!-- </a> -->
+      <!-- {% else %} -->
+        <!-- {{ session.venue.name }} -->
+      <!-- {% endif %} -->
+    {% endif %}
+  {% endif %}
+</p>

folkugat_web/assets/templates/fragments/sessions/session_list.html

@@ -0,0 +1,28 @@
+<ol id="{{ session_list_id }}"
+    class="flex flex-col items-center justify-center">
+{% for session in sessions %}
+    {% include "fragments/sessions/session_row.html" %}
+{% endfor %}
+{% if more_sessions or less_sessions %}
+    <li>
+      {% if more_sessions %}
+        <button title="Mostra més sessions"
+                class="text-beige mx-2"
+                hx-get="{{ get_sessions_url }}?limit={{ more_sessions }}"
+                hx-target="#{{ session_list_id }}"
+                hx-swap="outerHTML">
+          <i class="fa fa-caret-down" aria-hidden="true"></i>
+        </button>
+      {% endif %}
+      {% if less_sessions %}
+        <button title="Mostra menys sessions"
+                class="text-beige mx-2"
+                hx-get="{{ get_sessions_url }}?limit={{ less_sessions }}"
+                hx-target="#{{ session_list_id }}"
+                hx-swap="outerHTML">
+          <i class="fa fa-caret-up" aria-hidden="true"></i>
+        </button>
+      {% endif %}
+    </li>
+{% endif %}
+</ol>

folkugat_web/assets/templates/fragments/sessions/session_row.html

@@ -0,0 +1,44 @@
+<li class="border rounded border-beige
+            flex flex-row grow
+            p-2 m-2 w-full max-w-xl
+            relative"
+    id="session-row-{{session.id}}">
+  <a href="/session/{{session.id}}">
+  <div class="flex flex-row grow justify-center pl-10">
+    <div class="flex-1">
+      {% include "fragments/sessions/session_date.html" %}
+    </div>
+    <div class="ml-auto">
+      <a title="Més informació"
+         class="text-beige mx-1"
+         href="/sessio/{{session.id}}/">
+          <i class="fa fa-info-circle" aria-hidden="true"></i>
+      </a>
+      {% if logged_in %}
+      <button title="Edita la sessió"
+              class="text-beige mx-1"
+              hx-get="/api/sessions/editor/{{session.id}}/edita"
+              hx-target="#session-row-{{session.id}}"
+              hx-swap="outerHTML">
+        <i class="fa fa-pencil" aria-hidden="true"></i>
+      </button>
+      <button title="Esborra la sessió"
+              class="text-beige mx-1"
+              hx-delete="/api/sessions/editor/{{session.id}}/"
+              hx-target="#session-row-{{session.id}}"
+              hx-swap="outerHTML swap:0.5s">
+        <i class="fa fa-times" aria-hidden="true"></i>
+      </button>
+      {% endif %}
+    </div>
+  </div>
+  {% if session.id == next_session_id %}
+      <div class="absolute -top-5 -left-6
+                   bg-beige text-xs font-bold
+                   px-2 py-1
+                   transition-opacity duration-200
+                   rounded">
+        Propera<br>sessió
+      </div>
+  {% endif %}
+</li>

folkugat_web/assets/templates/fragments/sessions/session_row_editing.html

@@ -0,0 +1,96 @@
+<li id="session-editor-row-{{session.id}}"
+    class="border rounded border-beige
+           flex flex-col grow
+           py-2 px-10 m-2 w-full max-w-xl">
+  <form>
+    <div class="flex flex-row justify-end items-center">
+      <button title="Aplica els canvis"
+              class="text-beige mx-2"
+              hx-put="/api/sessions/editor/{{session.id}}/"
+              hx-target="#session-editor-row-{{session.id}}"
+              hx-swap="outerHTML">
+        <i class="fa fa-check" aria-hidden="true"></i>
+      </button>
+      <button title="Descarta els canvis"
+              class="text-beige mx-2"
+              hx-get="/api/sessions/editor/{{session.id}}/"
+              hx-target="#session-editor-row-{{session.id}}"
+              hx-swap="outerHTML">
+        <i class="fa fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="flex flex-col items-start pl-5">
+      <div>
+        <label for="session-editor-row-{{session.id}}-date">
+          Data:
+        </label>
+        <input type="date" name="date"
+               value="{{ session.date.strftime('%Y-%m-%d') }}"
+               min="2022-01-01"
+               max="2050-12-31"
+               class="border-none focus:outline-none
+                      text-yellow-50 text-center
+                      bg-brown p-0 m-0
+                      session-editor-{{session.id}}"
+               />
+      </div>
+      <div>
+        <label for="session-editor-row-{{session.id}}-start-time">
+          Hora d'inici:
+        </label>
+        <input type="time" name="start_time"
+               value="{{ session.start_time.strftime('%H:%M') }}"
+               step="60"
+               class="border-none focus:outline-none
+                      text-yellow-50 text-center
+                      bg-brown p-0 m-0
+                      session-editor-{{session.id}}"
+               />
+      </div>
+      <div>
+        <label for="session-editor-row-{{session.id}}-end-time">
+          Hora final:
+        </label>
+        <input type="time" name="end_time"
+               value="{{ session.end_time.strftime('%H:%M') }}"
+               step="60"
+               class="border-none focus:outline-none
+                      text-yellow-50 text-center
+                      bg-brown p-0 m-0
+                      session-editor-{{session.id}}"
+               />
+      </div>
+      <div>
+        <label for="session-editor-row-{{session.id}}-venue-name">
+          Lloc:
+        </label>
+        <input list="llocs" name="venue_name"
+               placeholder="nom del lloc"
+               value="{{ session.venue.name or "" }}"
+               class="border border-yellow-50 focus:outline-none
+                      rounded
+                      text-yellow-50 text-center
+                      bg-brown p-0 m-0
+                      session-editor-{{session.id}}"
+               />
+        <datalist id="llocs">
+          <option value="la FEM">
+          <option value="Cal Temerari">
+        </datalist>
+      </div>
+      <div>
+        <label for="session-editor-row-{{session.id}}-venue-url">
+          Link:
+        </label>
+        <input placeholder="URL del lloc" name="venue_url"
+               value="{{ session.venue.url or "" }}"
+               class="border border-yellow-50 focus:outline-none
+                      rounded
+                      text-yellow-30 text-center
+                      bg-brown p-0 m-0 my-1
+                      session-editor-{{session.id}}"
+               />
+      </div>
+    </div>
+  </form>
+</li>

folkugat_web/assets/templates/fragments/tema/editor/lyric.html

@@ -0,0 +1,35 @@
+<form id="tema-lyric-{{ lyric_idx }}">
+  <h5 class="text-sm text-beige text-right">
+    <input name="title"
+           placeholder="Nom de la lletra"
+           value="{{ lyric.title }}"
+           class="border border-beige focus:outline-none
+                  rounded
+                  bg-brown px-2 "
+      />
+    <button title="Desa els canvis"
+            class="mx-1"
+            hx-put="/api/tema/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-check" aria-hidden="true"></i>
+    </button>
+    <button title="Descarta els canvis"
+            class="mx-1"
+            hx-get="/api/tema/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </h5>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+  <textarea name="lyric"
+      placeholder="Lletra"
+      rows="{{ lyric.content.count('\n') + 1 }}"
+      class="border border-beige focus:outline-none
+             w-full text-center
+             rounded
+             bg-brown p-2 m-0">
+{{ lyric.content }}
+  </textarea>
+</form>

folkugat_web/assets/templates/fragments/tema/editor/title.html

@@ -0,0 +1,26 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="tema-title">
+  <form>
+    <input name="title"
+           placeholder="Nom del tema"
+           value="{{ tema.title }}"
+           class="border border-beige focus:outline-none
+                  rounded text-3xl
+                  bg-brown p-2 m-0"
+      />
+    <button title="Desa"
+            class="text-beige text-3xl mx-1"
+            hx-put="/api/tema/{{ tema.id }}/title"
+            hx-target="#tema-title"
+            hx-swap="outerHTML">
+      <i class="fa fa-check" aria-hidden="true"></i>
+    </button>
+    <button title="Descarta"
+            class="text-beige text-3xl mx-1"
+            hx-get="/api/tema/{{ tema.id }}/title"
+            hx-target="#tema-title"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+  </form>
+</div>

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

@@ -0,0 +1,21 @@
+<li class="flex flex-row items-start">
+  <div class="p-2 m-2 text-beige border border-beige rounded-md">
+    <a href="{{ link.url }}" target="_blank">
+    {% if link.subtype == LinkSubtype.SPOTIFY %}
+      {% include "icons/spotify.svg" %}
+    {% elif link.subtype == LinkSubtype.YOUTUBE %}
+      {% include "icons/youtube.svg" %}
+    {% elif link.subtype == LinkSubtype.PDF %}
+      {% include "icons/pdf.svg" %}
+    {% elif link.type == LinkType.AUDIO %}
+      {% include "icons/notes.svg" %}
+    {% else %}
+      {% include "icons/link.svg" %}
+    {% endif %}
+    </a>
+  </div>
+  <div class="my-2">
+    <p class="text-sm text-beige">Partitura</p>
+    <p>Hola</p>
+  </div>
+</li>

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

@@ -0,0 +1,27 @@
+{% if logged_in or tema.links %}
+<h4 class="text-xl text-beige">Enllaços</h4>
+<hr class="h-px mt-1 mb-3 bg-beige border-0">
+{% endif %}
+
+{% if tema.links %}
+{% for link in tema.links %}
+  <ul class="flex flex-col justify-center"
+      id="new-link-target">
+  {% set link_idx = loop.index0 %}
+  {% include "fragments/tema/link.html" %}
+  </ul>
+{% endfor %}
+{% endif %}
+
+{% if logged_in %}
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix una lletra"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/link"
+          hx-target="#new-link-target"
+          hx-swap="beforebegin">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix un enllaç
+  </button>
+</div>
+{% endif %}

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

@@ -0,0 +1,25 @@
+<div id="tema-lyric-{{ lyric_idx }}">
+  <h5 class="text-sm text-beige text-right">
+    {{ lyric.title }}
+    {% if logged_in %}
+    <button title="Modifica la lletra"
+            class="mx-1"
+            hx-get="/api/tema/{{ tema.id }}/editor/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-pencil" aria-hidden="true"></i>
+    </button>
+    <button title="Esborra la lletra"
+            class="mx-1"
+            hx-delete="/api/tema/{{ tema.id }}/lyric/{{ lyric_idx }}"
+            hx-target="#tema-lyric-{{ lyric_idx }}"
+            hx-swap="outerHTML">
+      <i class="fa fa-times" aria-hidden="true"></i>
+    </button>
+    {% endif %}
+  </h5>
+  <hr class="h-px mt-1 mb-3 bg-beige border-0">
+  <div class="text-center">
+  {{ lyric.content.replace('\n', '<br>') | safe }}
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+{% if logged_in or tema.lyrics %}
+<h4 class="text-xl text-beige">Lletra</h4>
+{% endif %}
+
+{% if tema.lyrics %}
+{% for lyric in tema.lyrics %}
+  {% set lyric_idx = loop.index0 %}
+  {% include "fragments/tema/lyric.html" %}
+{% endfor %}
+{% endif %}
+
+{% if logged_in %}
+<div id="new-lyric-target"></div>
+<div class="flex flex-row my-2 justify-end">
+  <button title="Afegeix una lletra"
+          class="text-sm text-beige text-right"
+          hx-post="/api/tema/{{ tema.id }}/lyric"
+          hx-target="#new-lyric-target"
+          hx-swap="beforebegin">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix una lletra
+  </button>
+</div>
+{% endif %}

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

@@ -0,0 +1,34 @@
+{% include "fragments/menu.html" %}
+<div class="flex justify-center">
+  <div class="m-12 grow max-w-4xl text-center">
+    {% include "fragments/tema/title.html" %}
+    <div class="text-left">
+
+      <!-- {% if tema.scores() %} -->
+      <!-- temes -->
+      <!-- <h4 class="text-xl text-beige">Tema</h4> -->
+      <!-- <hr class="h-px mt-1 mb-3 bg-beige border-0"> -->
+      <!-- {% for file in tema.files %} -->
+      <!--   {% if file.type == FileType.PDF %} -->
+      <!--     {% set pdf_url = file.path %} -->
+      <!--     {% include "fragments/pdf_viewer.html" %} -->
+      <!--   {% endif %} -->
+      <!-- {% endfor %} -->
+      <!-- {% endif %} -->
+
+      {% include "fragments/tema/lyrics.html" %}
+      {% include "fragments/tema/links.html" %}
+
+      <!-- PROPERTIES -->
+      {% if tema.properties %}
+      <h4 class="text-xl mt-3 text-beige">Informació</h4>
+      <hr class="h-px mt-1 mb-3 bg-beige border-0">
+      {% for property in tema.properties %}
+        <p>
+          <i>{{ property.field.value.capitalize() }}</i>: {{ property.value }}
+        </p>
+      {% endfor %}
+      {% endif %}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<div class="flex flex-row flex-wrap justify-center"
+     id="tema-title">
+  <h3 class="text-3xl p-4">{{ tema.title }}</h3>
+  {% if logged_in %}
+  <button title="Canvia el títol"
+          class="text-beige text-2xl"
+          hx-get="/api/tema/{{ tema.id }}/editor/title"
+          hx-target="#tema-title"
+          hx-swap="outerHTML">
+    <i class="fa fa-pencil" aria-hidden="true"></i>
+  </button>
+  {% endif %}
+</div>

folkugat_web/assets/templates/fragments/temes/pagina.html

@@ -0,0 +1,24 @@
+{% include "fragments/menu.html" %}
+<div class="p-12 text-center flex flex-col items-center justify-center">
+  <h3 class="text-3xl text-beige p-4">Temes</h3>
+  <button title="Afegeix un tema"
+          class="text-beige m-2">
+    <i class="fa fa-plus" aria-hidden="true"></i>
+    Afegeix un tema
+  </button>
+  <input type="text" name="query" value=""
+         placeholder="Busca una tema..."
+         class="rounded
+                text-yellow-50 bg-brown
+                border border-yellow-50
+                p-2 m-2"
+         hx-get="/api/temes/busca"
+         hx-trigger="revealed, keyup delay:500ms changed"
+         hx-target="#search-results">
+  <div class="flex justify-center">
+    <div id="search-results"
+         class="m-4 max-w-5xl
+                flex flex-wrap items-center justify-center">
+    </div>
+  </div>
+</div>

folkugat_web/assets/templates/fragments/temes/result.html

@@ -0,0 +1,44 @@
+<div class="flex-none px-4 py-2 w-80 h-80 m-2 border-solid border rounded-md bg-yellow-50 text-brown">
+  <div class="flex flex-col h-full">
+    <div class="text-xl text-beige">
+      <a href="/tema/{{ tema.id }}">
+        {{ tema.title }}
+      </a>
+    </div>
+    <div class="grow"></div>
+    <div class="flex flex-row">
+    </div>
+      <ul class="flex flex-row items-center justify-center">
+        {% if tema.links %}
+          {% for link in tema.links %}
+            <li class="p-2 m-2 text-beige border border-beige rounded-md">
+              <a href="{{ link.url }}" target="_blank">
+              {% if link.type == LinkType.AUDIO %}
+                {% if link.subtype == LinkSubtype.SPOTIFY %}
+                  {% include "icons/spotify.svg" %}
+                {% elif link.subtype == LinkSubtype.YOUTUBE %}
+                  {% include "icons/youtube.svg" %}
+                {% else %}
+                  {% include "icons/notes.svg" %}
+                {% endif %}
+              {% elif link.type == LinkType.SCORE %}
+                {% if link.subtype == LinkSubtype.PDF %}
+                  {% include "icons/pdf.svg" %}
+                {% else %}
+                  {% include "icons/link.svg" %}
+                {% endif %}
+              {% else %}
+                {% include "icons/link.svg" %}
+              {% endif %}
+              </a>
+            </li>
+          {% endfor %}
+        {% endif %}
+      </ul>
+    <!-- {% if logged_in %} -->
+    <!--   <div> -->
+    <!--     Edita -->
+    <!--   </div> -->
+    <!-- {% endif %} -->
+  </div>
+</div>