ADD content & styles

views/templates/page-enlaces.twig

@@ -1,7 +1,55 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
-        Enlaces ---- A simple warning alert—check it out!
+    <p class="alert alert-info" role="alert">
+    <i class="bi bi-link-45deg"></i>  
+    Enlaces</p>
+
+    {% if enlaces %}
+    <div class="enlaces">
+    <div class="accordion" id="accordionEnlaces">
+        {% for grupo in enlaces %}
+            <div class="accordion-item">
+                <h2 class="accordion-header">
+
+                    <button class="accordion-button {% if loop.index0 != 0 %}collapsed{% endif %}" 
+                            type="button" 
+                            data-bs-toggle="collapse" 
+                            data-bs-target="#collapse{{ loop.index }}" 
+                            aria-expanded="{% if loop.index0 == 0 %}true{% else %}false{% endif %}" 
+                            aria-controls="collapse{{ loop.index }}">
+                        {{ grupo.titulo }}
+
+                        <span class="badge bg-secondary ms-2">{{ grupo.enlaces|length }}</span>
+                    </button>
+                </h2>
+                <div id="collapse{{ loop.index }}" 
+                    class="accordion-collapse collapse {% if loop.index0 == 0 %}show{% endif %}" 
+                    data-bs-parent="#accordionEnlaces">
+                    <div class="accordion-body">
+                        {% if grupo.enlaces %}
+                            <div class="d-grid gap-2">
+                                {% for enlace in grupo.enlaces %}
+                                    <a href="{{ enlace.url }}"
+                                    class="btn btn-outline-dark btn-sm text-start"
+                                    target == '_blank'
+                                    rel="noopener noreferrer">
+                                        {{ enlace.titulo }}
+                                        {% if enlace.target == '_blank' %}
+                                            <i class="fas fa-external-link-alt ms-1 small"></i>
+                                        {% endif %}
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div> 
     </div>
+    {% endif %}
+
+    {#<pre>{{ dump(enlaces) }}</pre>#}
+
 {% endblock %}