{% if items %}
  {% for item in items %}
    <a class="navbar-item" href="{{ item.compose_url }}">
      <span class="icon is-small"><i class="{{ manual_icon_class }}"></i></span>
      <span style="margin-left: 0.35rem;">
        {{ item.person_name }} · {{ item.service|title }}
      </span>
    </a>
  {% endfor %}
{% else %}
  <a class="navbar-item is-disabled">No contacts found.</a>
{% endif %}
{% if is_preview %}
  <hr class="navbar-divider" style="margin: 0.2rem 0;">
  <a
    class="navbar-item"
    hx-get="{{ fetch_contacts_url }}"
    hx-target="#nav-compose-contacts"
    hx-swap="innerHTML">
    <span class="icon is-small"><i class="fa-solid fa-users"></i></span>
    <span style="margin-left: 0.35rem;">Fetch Contacts</span>
  </a>
{% endif %}