{% load i18n %}

<a href="{% url 'core:child' current_child.slug %}">{{ current_child }}</a>
{% if children.count > 0 %}
    <a href="#" class="ms-1 ps-1 pe-1 dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="visually-hidden">{% trans 'Switch child' %}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"             fill="currentColor" viewBox="0 0 16 16">
            <path d="M3.626 6.832A.5.5 0 0 1 4 6h8a.5.5 0 0 1 .374.832l-4 4.5a.5.5 0 0 1-.748 0l-4-4.5z"></path>
            <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2z"></path>
        </svg>
    </a>
    <div class="dropdown-menu dropdown-menu-start">
        <h6 class="dropdown-header">{% trans "Switch to…" %}</h6>
        {% for child in children %}
            <a class="dropdown-item d-flex align-items-center" href="{% url target_url child.slug %}">
                {% include "core/child_thumbnail.html" %}
                <span class="text-wrap ms-2">{{ child }}</span>
            </a>
        {% endfor %}
    </div>
{% endif %}
