Change the snip layout to make it less cluttered

templates/snip/base.html.twig

@@ -0,0 +1,74 @@
+{% extends 'base/one.column.html.twig' %}
+
+{% block body %}
+    {% if app.user and app.user is same as(snip.createdBy) %}
+        <a href="{{ path('snip_index') }}" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i> Index
+        </a>
+    {% else %}
+        <a href="{{ path('snip_public') }}" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i> Index
+        </a>
+    {% endif %}
+    {% block buttons %}{% endblock %}
+
+    <br><br>
+    <div class="card" style="width: 100%;">
+        <div class="card-header d-flex justify-content-between">
+            <ul class="nav nav-tabs card-header-tabs">
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'single' %}active{% endif %}"
+                       href="{{ path('snip_single', {'snip': snip.id}) }}">View</a>
+                </li>
+                {% if is_granted('edit', snip) %}
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'edit' %}active{% endif %}"
+                       href="{{ path('snip_edit', {'snip': snip.id}) }}">Edit</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'versions' %}active{% endif %}"
+                       href="{{ path('version_index', {'snip': snip.id}) }}">Versions</a>
+                </li>
+                {% endif %}
+            </ul>
+            <span>
+                <span class="badge bg-secondary">
+                    <i class="fa fa-hashtag"></i> {{ snip.id }}
+                </span>
+                {% for tag in snip.tags %}
+                    <span class="badge bg-secondary">{{ tag }}</span>
+                {% endfor %}
+                {{ include('user/badge.html.twig', {user: snip.createdBy}) }}
+                {{ include('snip/badge.html.twig', {snip: snip}) }}
+            </span>
+        </div>
+        <div class="card-body">
+            {% block cardbody %}{% endblock %}
+        </div>
+        <div class="card-footer">
+            <p class="card-text text-muted">
+                Current version: {{ snip.activeVersion.id }}
+                {% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
+                Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
+            </p>
+        </div>
+    </div>
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <script>
+        const codeBlocks = document.querySelectorAll('code.hljs');
+
+        codeBlocks.forEach((block) => {
+            hljs.highlightElement(block);
+        });
+    </script>
+{% endblock %}