{% load i18n %}
{% comment %}
  <c-card.links> — a contributor's links elsewhere on the web, each named by its site.

  Attributes:
    links  – [{url, host}]
    class  – extra classes on the card
{% endcomment %}
<c-vars links class />
<c-mvp.card title="{% translate 'Links' %}" class="bg-base-100 {{ class }}" data-card="links" only>
  {% if links %}
    <ul class="flex flex-col gap-2 text-sm">
      {% for link in links %}
        <li class="flex items-center gap-2 min-w-0">
          <c-icon name="link" class="text-base-content/60 shrink-0" aria-hidden="true" only />
          <a href="{{ link.url }}" class="link link-hover break-words" rel="noopener nofollow">{{ link.host }}</a>
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <c-missing only><span>{% translate "No links have been added." %}</span></c-missing>
  {% endif %}
</c-mvp.card>