Implement snip content names

templates/generic/datetime.badge.html.twig

@@ -0,0 +1 @@
+<span class="badge text-bg-secondary">{{ date|date('Y-m-d H:i:s') }}</span>

templates/snip/single.html.twig

@@ -54,10 +54,7 @@
             <p class="card-text text-muted">
                 Current version: {{ snip.activeVersion.id }}
                 {% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
-
-                Created at {{ snip.activeVersion.id.dateTime|date('Y-m-d H:i:s') }}
-
-
+                Created at {{ include('generic/datetime.badge.html.twig', {date: snip.activeVersion.id.dateTime}) }}
             </p>
         </div>
     </div>

templates/version/index.html.twig

@@ -15,8 +15,13 @@
     <br><br>
     <div class="list-group">
         {% for version in snip.snipContents|reverse %}
-            <a class="list-group-item {% if version.id == snip.activeVersion.id %}list-group-item-success{% endif %}" href="{{ path('version_set', {version: version.id, snip: snip.id}) }}">
-                {{ version.id.dateTime|date('Y-m-d H:i:s') }} - {{ version.id }}
+            <a class="list-group-item {% if version.id == snip.activeVersion.id %}list-group-item-success{% endif %} d-flex justify-content-between"
+               href="{{ path('version_set', {version: version.id, snip: snip.id}) }}">
+                <span>
+                    {{ include('generic/datetime.badge.html.twig', {date: version.id.dateTime}) }}
+                    {% if version.name %}{{ version.name }}{% endif %}
+                </span>
+                <span class="text-muted">{{ version.id }}</span>
             </a>
         {% endfor %}
     </div>