@extends('layouts.grid')
@section('content')
    <style>
        .table-container    {
            overflow-y  : auto;
            height      : 350px;
            margin-right: 30px;
        }
        .table  {
            width       : 340px;

        }
    </style>
       <section class="section">
            <div class="container">
                <div class="container">
                    <a href="/team/compose" class="button is-primary">Team composition</a>
                </div>
            </div>
        </section>
    <section class="section is-paddingless">
        <div class="container">
            @foreach ($teams as $team)
                <div class="container is-pulled-left">
                    <div class="table-container">
                        <table class="table is-hoverable is-size-6">
                            <thead>
                                <tr>
                                    <td colspan="4" class="has-text-info is-size-4">{{ $team->team_name }}</td>
                                </tr>
                            <thead>
                            <tbody>
                                @foreach ($team->players as $player)
                                <tr>
                                    <td>{{ $player->str_name }}</td>
                                    <td>{{ $player->id }}</td>
                                    <td>{{ $player->classif_code }}</td>
                                    <td>{{ $player->classif_value }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4">
                                        <span class="tag">
                                            {{ $team->div_name }}&nbsp;&nbsp;&nbsp;
                                            [{{ $team->team_min }}-{{ $team->team_avg }}]
                                        </span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
 @endsection