{% extends 'base.html' %}

{% block app_content %}
<div class="row">
  <div class="col-xs-0 col-md-1"></div>
  <div class="col-xs-12 col-md-10">
<h2>My games:</h2>
  </div>
  <div class="col-xs-0 col-md-1"></div>
</div>

{% if current_user.games %}
<div class="row">
  <div class="col-xs-0 col-md-1"></div>
  <div class="col-xs-12 col-md-10">
<div class="table">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Game Name</th>
                <th scope="col">Current State</th>
                <th scope="col">Start Time</th>
                <th scope="col">End Time</th>
                <th scope="col">My Role</th>
            </tr>
        </thead>
        <tbody>
            {% for game in current_user.games %}
            <tr>
                <td><a href="{{ url_for('main.game_dashboard', game_name = game.name) }}">{{ game.name }}</a></td>
                <td>{{ game.get_state().name.title() }}</td>
                <td>{{ game.start_time }}</td>
                <td>{{ game.end_time }}</td>
                <td>
                    {% for gameplayer in current_user.user_games if gameplayer.game == game %}
                        {{ gameplayer.role.name.title() }}
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
</div>
<div class="col-xs-0 col-md-1"></div>
</div>

{% else %}
<div class="alert alert-info" role="alert">
    You don't participate in any game yet 😢
</div>
{% endif %}
{% endblock %}