
<section class="tab-section" ng-controller="CompetitionControllerTeams" ng-if="!competition.hasStandings">
    <div
            of-in-view
            of-tag-screen
            screen-name="{{ pages.find('teams').screenName }}">
    </div>

    <div class="card">
        <div
                loading
                ng-if="isLoadingTeams"
                class="card-body">
        </div>
        <div ng-if="!isLoadingTeams && !teams.length" of-coming-soon></div>
        <div class="card-body team-list-card" ng-if="!isLoadingTeams && teams.length">

            <ul ng-repeat-start="team in teams | orderBy:'name'" class="team-list">
                <li class="team-list-item">
                    <img ng-src="{{ team.logoUrlSmall }}" class="team-list-logo">
                    <a ng-href="#!/team/{{competitionId}}/{{seasonId}}/{{team.id}}" class="team-list-name">{{team.name}}</a>
                </li>
            </ul>

            <div ng-if="$index % 3 == 2" class="clearfix visible-md"></div>
            <div ng-if="$index % 2 == 1" class="clearfix visible-sm"></div>
            <div ng-repeat-end ng-if="$index % 1 == 0" class="clearfix visible-xs"></div>

        </div>
    </div>
</section>
