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

    .empty-tab(ng-if="vm.projects && !vm.projects.size")
        svg.icon.icon-unwatch
            use(xlink:href="#icon-unwatch")

        p(
            translate="USER.PROFILE.PROJECTS_EMPTY"
            translate-values="{username: vm.user.get('full_name_display')}"
        )

    .list-itemtype-project(tg-repeat="project in vm.projects")
        .list-itemtype-project-left
            .project-list-single-title-wrapper
                a.list-itemtype-project-image(
                    href="#"
                    tg-nav="project:project=project.get('slug')"
                    title="{{ ::project.get('name') }}"
                )
                    img(
                        tg-project-logo-small-src="::project"
                        alt="{{::project.get('name')}}"
                    )
                .project-list-single-title
                    h2
                        a(
                            href="#"
                            tg-nav="project:project=project.get('slug')"
                            title="{{ ::project.get('name') }}"
                        ) {{::project.get('name')}}
                    p {{ ::project.get('description') | limitTo:300 }}

            .list-itemtype-project-tags.tags-container(ng-if="::project.get('tags').size")
                span.tag(
                    style='border-left: 5px solid {{::tag.get("color")}};'
                    tg-repeat="tag in ::project.get('colorized_tags')"
                )
                    span.tag-name {{::tag.get('name')}}

        .list-itemtype-project-right

            .list-itemtype-track
                span.list-itemtype-track-likers(
                    ng-class="{'active': project.get('is_fan')}"
                    title="{{ 'PROJECT.LIKE_BUTTON.COUNTER_TITLE'|translate:{total:project.get(\"total_fans\")||0}:'messageformat' }}"
                )
                    svg.icon.icon-like
                        use(xlink:href="#icon-like")
                    span {{ ::project.get('total_fans') }}

                span.list-itemtype-track-watchers(
                    ng-class="{'active': project.get('is_watcher')}"
                    title="{{ 'PROJECT.WATCH_BUTTON.COUNTER_TITLE'|translate:{total:project.get(\"total_watchers\")||0}:'messageformat' }}"
                )
                    svg.icon.icon-watch
                        use(xlink:href="#icon-watch")
                    span {{ ::project.get('total_watchers') }}

            .list-itemtype-project-members
                a(
                    tg-repeat="contact in ::project.get('contacts')"
                    tg-nav="user-profile:username=contact.get('username')"
                    title="{{::contact.get('full_name')}}"
                )
                    img(ng-src="{{::contact.get('photo')}}")