{% extends '::base.html.twig' %}

{% import "MagicWordBundle:Player:macros.html.twig" as pmacros %}

{% block body -%}
{% set languages = get_languages() %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb" style="background-color: #fff;">
    <li class="breadcrumb-item"><a href="{{path('home')}}">Accueil</a></li>
    <li class="breadcrumb-item active" aria-current="page">Jouer</li>
  </ol>
</nav>

<div class="row">
  <!-- TRAIN -->
  <div class="col-sm-4 mb-2">
    <div class="card">
      <div class="card-body">
        <p class="text-center">
            <i class="fas fa-running fa-4x" aria-hidden="true"></i> {{'Entrainement'|upper}}
        </p>
        <p>Blabla Blab laBlabla BlablaBlabla Blabla Blabla</p>

        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            S'entrainer
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            {% for language in languages %}
              <a class="please-wait dropdown-item" data-message="Génération de la grille" href="{{ path('train', {id: language.id}) }}">
                {{ language.value | trans }}
              </a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- CHALLENGE -->
  <div class="col-sm-4 mb-2">
    <div class="card">
      <div class="card-body">
        <p class="text-center">
            <i class="fas fa-chess fa-4x"></i> {{'Défi'|upper}}
        </p>
        <p>Blabla labla Blab laBlabla BlablaBlabla Blabla Blabla</p>
        <a class="btn btn-primary" href="{{ path('challenge') }}">{{ 'challenge_someone' | trans }}</a>
      </div>
    </div>
  </div>

  <!-- MASSIVES -->
  <div class="col-sm-4 mb-2">
    <div class="card">
      <div class="card-body">
        <p class="text-center">
            <i class="fa fa-bolt fa-4x" aria-hidden="true"></i> {{'Parties massives'|upper}}
        </p>
        <p>
          Blabla labla Blab laBlabla BlablaBlabla Blabla Blabla
        </p>
        <a class="btn btn-primary" href="{{ path('massives') }}">{{ 'massives' | trans }}</a>
      </div>
    </div>
  </div>

  <!-- IN PROGRESS -->
  <div class="col-sm-4 mb-2">
    <div class="card">
      <div class="card-body">
        <p class="text-center">
            <i class="fa fa-spinner fa-4x" aria-hidden="true"></i> {{'Parties en cours' | upper}}
        </p>
        <p>
          Blabla labla Blab laBlabla BlablaBlabla Blabla Blabla
        </p>
        <a class="btn btn-primary" href="{{ path('games_started') }}">{{ 'games_started' | trans }}</a>
      </div>
    </div>
  </div>

</div>
{% endblock %}