@if($teams->count() > 0)
@foreach ($teams as $key => $item)
    @if ($key < 10)
    <div class="d-flex align-items-center flex-wrap mb-2">
        <div class="symbol symbol-50 symbol-light mr-2 mt-1">
            <i class="far fa-circle" style="color: {{$item->color}};"></i>
        </div>
        <div class="d-flex flex-column flex-grow-1 mr-2 my-2">
            {{$item->team_name}}
        </div>
        <span class="text-right font-weight-bold">{{$item->engagement}}%</span>
    </div>
    @else 
        @if($key == 11)
        <div id="show-more-div" style="display: none;">
        @endif
        <div class="d-flex align-items-center flex-wrap mb-2">
            <div class="symbol symbol-50 symbol-light mr-2 mt-1">
                <i class="far fa-circle" style="color: {{$item->color}};"></i>
            </div>
            <div class="d-flex flex-column flex-grow-1 mr-2 my-2">
                {{$item->team_name}}
            </div>
            <span class="text-right font-weight-bold">{{$item->engagement}}%</span>
        </div>
    @endif
    @if (($teams->count()-1) == $key)
        </div>        
    @endif    
@endforeach
@if($teams->count() > 1)
<div class="d-flex align-items-center flex-wrap mb-2">
    <div class="symbol symbol-50 symbol-light mr-2 mt-1">
    </div>
    <div class="d-flex flex-column flex-grow-1 mr-2 my-2">            
    </div>
    <span class="text-right font-weight-bold btn" id="show-more">More</span>
</div>
@endif
@endif