<div class="bread-crumbs-container">
    <button class="bread-crumbs-back-btn">
        <svg><use xlink:href="/sprite.svg#angle-left"></use></svg>
        <span>{{ breadCrumbsBack|default('В каталог') }}</span>
    </button>
    <ul class="bread-crumbs-ul">
        {% for item in breadCrumbs|default([]) %}
            <li class="bread-crumbs-li">
                <a href="" class="bread-crumbs-link">{{ item }}</a>
            </li>
        {% endfor %}
    </ul>
    {% if breadCrumbsWithShare == true %}
        <button class="bread-crumbs-share-btn" data-dropdown-tippy>
            <svg><use xlink:href="/sprite.svg#share"></use></svg>
            <template data-dropdown-template-tippy>
                <div class="shared-dropdown">
                    <a href="" class="shared-dropdown-link">
                        <svg><use xlink:href="/sprite.svg#shared-tg"></use></svg>
                    </a>
                    <a href="" class="shared-dropdown-link">
                        <svg><use xlink:href="/sprite.svg#shared-whatsapp"></use></svg>
                    </a>
                    <a href="" class="shared-dropdown-link">
                        <svg><use xlink:href="/sprite.svg#shared-vk"></use></svg>
                    </a>
                    <a href="" class="shared-dropdown-link">
                        <svg><use xlink:href="/sprite.svg#shared-ok"></use></svg>
                    </a>
                    <a 
                        href="https://test.ru/path" 
                        class="shared-dropdown-link" 
                        style="color: #737373" 
                        x-data="{
                            copyToClipboard() {
                                navigator.clipboard.writeText(this.$el.href).then(() => {
                                    alert('Ссылка скопирована')
                                }).catch(err => {
                                    alert('Не удалось скопировать ссылку')
                                });
                            }
                        }"
                        @click.prevent="copyToClipboard()"
                    >
                        <svg><use xlink:href="/sprite.svg#copy"></use></svg>
                    </a>
                </div>
            </template>
        </button>
    {% endif %}
</div>