section.profile-contacts
    div(ng-if="vm.contacts === undefined")
        div.spin
            img(src="/#{v}/svg/spinner-circle.svg", alt="Loading...")

    div.empty-small(ng-if="vm.contacts && !vm.contacts.size")
        img(
            src="/#{v}/images/empty/empty_contact.png"
            alt="{{ 'USER.PROFILE.CONTACTS_EMPTY' | translate }}"
        )

        div(ng-if="!vm.isCurrentUser")
            p(translate="USER.PROFILE.CONTACTS_EMPTY", translate-values="{username: vm.user.get('full_name_display')}")
        div(ng-if="vm.isCurrentUser")
            p(translate="USER.PROFILE.CURRENT_USER_CONTACTS_EMPTY")
            p(translate="USER.PROFILE.CURRENT_USER_CONTACTS_EMPTY_EXPLAIN")

    div.list-itemtype-user(tg-repeat="contact in ::vm.contacts")
        a.list-itemtype-avatar(tg-nav="user-profile:username=contact.get('username')", title="{{::contact.get('name')}}")
            img(
                tg-avatar="contact"
                alt="{{::contact.get('full_name')}}"
            )

        div.list-itemtype-user-data
            h2
                a(tg-nav="user-profile:username=contact.get('username')", title="{{::contact.get('full_name_display') }}") {{::contact.get('full_name_display')}}

            p {{::contact.get('roles').join(", ")}}
            p.extra-info(ng-if="contact.get('bio')") {{::contact.get('bio')}}