<section class="tab-section" ng-controller="CompetitionControllerStats" ng-if="competition.hasStatistics">
    <div
            of-in-view
            of-tag-screen
            screen-name="{{ pages.find('stats').screenName }}">
    </div>
    <select
            ng-model="selectedStat"
            ng-options="(v.label | translate) for (k, v) in stats"
            ng-change="onStatsChange(selectedStat)"
            ng-if="!isLoadingStats">
    </select>

    <div class="card push-stats-down">
        <div
                loading
                ng-if="isLoadingStats"
                class="card-body">
        </div>
        <div ng-if="!isLoadingStats && !statsTable.length" of-coming-soon></div>
        <div class="card-body" ng-if="!isLoadingStats && statsTable.length">
            <of-competition-stats-card
                    player="player"
                    index="$index"
                    stat-name="selectedStat.statName"
                    ng-repeat="player in statsTable">
            </of-competition-stats-card>
        </div>
    </div>
</section>