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