@extends('layouts.app')

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

          <table class="table table-bordered">
          <thead>
            <tr>
              <th>Team</th>
              @foreach($missions as $mission)
              <th>
                <h3>{{ $mission->id }}</h3>
                {{ $mission->hashtag }}
              </th>
              @endforeach
            </tr>
          </thead>
          <tbody>
          @foreach($teams as $team)
            <tr>
              <td>
                <div class="team">
                  <span class="team-icon" style="background-color: #{{ $team->color }};"></span> 
                  <span class="team-name">{{ $team->name }}</span>
                </div>
                <div class="players">
                  @foreach($team->players as $player)
                    <a href="https://twitter.com/{{ $player->twitter }}">{{ '@'.$player->twitter }}</a>
                  @endforeach
                </div>
              </td>
              @foreach($missions as $mission)
              <td>
                <div>{{ $mission->complete($team) ? 'Complete' : '' }}</div>
                <div>{{ $mission->progress($team)[0].'/'.$mission->progress($team)[1] }}</div>
              </td>
              @endforeach
            </tr>
          @endforeach
          </tbody>
          </table>

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