@extends('layouts.grid')
@section('content')
    <style>
        .cmp-cont  { clear:both; margin: 30px 10px 20px 20px; }
        .cmp-box   { float:left; width:300px; height:200px; margin: 10px 10px 20px 0px ; background:#ffffff;display:block;overflow:auto;}
        .cmp-title { clear:both;
                    width:100%;
                    margin: 0px 0px 0px 0px ;
                    padding: 8px 5px 8px 5px;
                    font-size:1.1em; color:white; background:#2d41bf;
                    text-align: center;
                }
        .cmp-data  { float:left; width:250px;margin: 5px 10px 5px 10px ; }
        .cmp-name  { float:left; width:150px; }
        .cmp-small { float:left; width:50px; }
        .cmp-vsmall{ float:left; width:25px; }
        hr {margin:0px;}
    </style>
    <div class = "cmp-cont">
        @foreach ($teams as $team)
            <div class = "cmp-box">
                <div class="cmp-title">{{ $team->team_name }}</div>
                <div class="cmp-data">
                    {{ $team->div_name }}&nbsp;&nbsp;&nbsp;
                    [{{ $team->team_min }}-{{ $team->team_avg }}]
                </div>
                <hr/>
                <div class="cmp-data">
                    @foreach ($team->players as $P)
                        <div class="cmp-name">{{ $P->str_name  }}</div>
                        <div class="cmp-small">{{ $P->id   }}</div>
                        <div class="cmp-vsmall">{{ $P->classif_code  }}</div>
                        <div class="cmp-vsmall">{{ $P->classif_value  }}</div>
                    @endforeach
                </div>
                <hr/>
                <div class="cmp-data">{{ $team->div_name }}</div>
            </div>
        @endforeach
    </div>
    <div class="cmp-cont">
            <br/>
            <input onclick="location.href='/team/compose'" class="button bn" value="Teams">
    </div>
@endsection