{% extends 'layouts/base.twig' %}

{% block content %}
    <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 %}