{{#if recommendations}}
    <ul class="flex flex-col gap-1 rounded-theme overflow-hidden" data-recommendations="">
        {{#foreach recommendations}}
            <li>
                <a class="py-1 text-[0.8rem] leading-tight flex items-center gap-2 hover:opacity-75" href="{{this.url}}" data-recommendation="{{this.id}}" target="_blank" rel="noopener">
                    {{#if this.favicon}}
                        <img class="w-[18px] h-[18px] rounded-[8px] aspect-square object-cover" src="{{this.favicon}}" alt="" loading="lazy" onerror="this.style.display='none'">
                    {{/if}}
                    <h3 class="font-medium line-clamp-1 text-ellipsis overflow-hidden" title="{{this.title}}">{{this.title}}</h3>
                </a>
            </li>
        {{/foreach}}
    </ul>
{{/if}}