{% extends "base.html.twig" %}

{% block title %}{{ parent() }} - {{ fixture[0].homeTeam.team_name }} - {{ fixture[0].awayTeam.team_name }}{% endblock %}

{% block body %}
	<div class="flex2">
    	<figure>
    		<img src="{{ fixture[0].homeTeam.logo }}" width="150">
			<figcaption class="text-center">{{ fixture[0].homeTeam.team_name }}</figcaption>
		</figure>
		<h1 style="margin:20px;">{{ fixture[0].goalsHomeTeam }}-{{ fixture[0].goalsAwayTeam }}</h1>
		<figure>
    		<img src="{{ fixture[0].awayTeam.logo }}" width="150">
			<figcaption class="text-center">{{ fixture[0].awayTeam.team_name }}</figcaption>
		</figure>
	</div></br>
	<ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" onclick="$('.active').removeClass('active');" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Information</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" onclick="$('.active').removeClass('active');" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Statistiques</a>
      </li>
  	</ul></br> 	
    <div class="tab-content" id="pills-tabContent">
      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      	<div class="flex2">
    		Date: {{ fixture[0].event_date|date("d-m-Y H:i") }}</br>
    		Stade: {{ fixture[0].venue }}</br>
    		Compétition: {{ fixture[0].league.name }}</br>
    		Arbitre: {{ fixture[0].referee }}</br>
    		Tour/Journée: {{ fixture[0].round|replace({'Regular Season -': 'Journée' })|replace({'Semi-finals': 'Demi-finales' })|replace({'Quarter-finals': 'Quarts de finale' })|replace({'Finals': 'de finale' })|replace({'Final': 'Finale' })|replace({'Qualifying': 'qualification' })|replace({'Preliminary Round': 'Tour préliminaire' })|replace({'st': 'er' })|replace({'Round': 'Tour' })|replace({'rd': 'ème' })|replace({'nd': 'ème' })|replace({'th': 'ème' })  }}
    	</div>
      </div>
      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      	{% if pos is not null %}
          	<table class="table table-sm table-striped w-auto" style="margin:auto;">
        		<th class="text-center"><img src="{{ fixture[0].homeTeam.logo }}" width="100"></br>{{ fixture[0].homeTeam.team_name }}</th>
        		<th class="text-center" style="vertical-align: middle;text-decoration:underline;">Statistique</th>
        		<th class="text-center"><img src="{{ fixture[0].awayTeam.logo }}" width="100"></br>{{ fixture[0].awayTeam.team_name }}</th>
            		<tr>
            			<td class="text-center">{{ pos["Ball Possession"]["home"] }}</td>
            			<td class="text-center">Possession</td>
            			<td class="text-center">{{ pos["Ball Possession"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Shots on Goal"]["home"] }}</td>
            			<td class='text-center'>Tirs cadrés</td>
            			<td class='text-center'>{{ pos["Shots on Goal"]["away"] }}</td>
            		</tr>	
            		<tr>
            			<td class="text-center">{{ pos["Shots off Goal"]["home"] }}</td>
            			<td class='text-center'>Tirs non cadrés</td>
            			<td class='text-center'>{{ pos["Shots off Goal"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Blocked Shots"]["home"] }}</td>
            			<td class='text-center'>Tirs arrété</td>
            			<td class='text-center'>{{ pos["Blocked Shots"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Corner Kicks"]["home"] }}</td>
            			<td class='text-center'>Corner</td>
            			<td class='text-center'>{{ pos["Corner Kicks"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Offsides"]["home"] }}</td>
            			<td class='text-center'>Hors-jeux</td>
            			<td class='text-center'>{{ pos["Offsides"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Fouls"]["home"] }}</td>
            			<td class='text-center'>Fautes</td>
            			<td class='text-center'>{{ pos["Fouls"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Yellow Cards"]["home"] }}</td>
            			<td class='text-center'>Cartons jaune</td>
            			<td class='text-center'>{{ pos["Yellow Cards"]["away"] }}</td>
            		</tr>
            		<tr>
            			<td class="text-center">{{ pos["Red Cards"]["home"] }}</td>
            			<td class='text-center'>Cartons rouge</td>
            			<td class='text-center'>{{ pos["Red Cards"]["away"] }}</td>
            		</tr>          	
        	</table>
        {% endif %}		
      </div>
	</div>
{% endblock %}