@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('js/teams.js') }}"></script>
@endpush

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            @foreach($teams as $team)
                <section class="panel panel-default" data-team="{{ $team->id }}">
                    <div class="panel-heading">
                        <div class="team">
                            <span class="team-icon" style="background-color: #{{ $team->color }};"></span> 
                            <span class="team-name">{{ $team->name }}</span>
                        </div>
                    </div>

                    <div class="panel-body player-list">
                        <ul>
                        @foreach($team->players as $player) 
                            <li>
                                <div class="profile">
                                    <img src="{{ $player->photo }}" style="border-color: #{{ $team->color }};"> 
                                    <span><a href="https://twitter.com/{{ $player->twitter }}">{{ '@'.$player->twitter }}</a></span>
                                </div>
                            </li>
                        @endforeach
                        </ul>

                        @can('admin')
                        <form class="form-inline">
                            <div class="form-group">
                                <input type="text" class="form-control new-player-twitter" data-team="{{ $team->id }}" placeholder="@twitter">
                                <button type="submit" class="btn btn-default new-player-twitter-btn">Add</button>
                            </div>
                        </form>
                        @endcan
                    </div>
                </section>
            @endforeach

            @can('admin')
            <button id="add-team" class="btn btn-default">New Team</button>

            <br><br>

            <form class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control new-player-twitter" data-team="0" placeholder="@twitter">
                    <button type="submit" class="btn btn-default new-player-twitter-btn">Remove</button>
                </div>
            </form>
            @endcan

        </div>
    </div>
</div>
@endsection