{% extends 'layout.html' %}

{% block title %}Games{% endblock %}

{% block content -%}
{% from 'components.html' import email_link %}
<table class="border-collapse table-auto w-full bg-white rounded">
    <thead>
        <tr class="border-b bg-gray-200">
            <th class="text-left py-3 px-4 font-bold uppercase">Id</th>
            <th class="text-left py-3 px-4 font-bold uppercase">Player Name</th>
            <th class="text-left py-3 px-4 font-bold uppercase hidden md:table-cell">Player Email</th>
            <th class="text-left py-3 px-4 font-bold uppercase hidden lg:table-cell">Play Time</th>
            <th class="text-left py-3 px-4 font-bold uppercase">Date</th>
        </tr>
    </thead>
    <tbody class="text-gray-700">
        {% for game in games -%}
        <tr class="border-b hover:bg-gray-100">
            <td class="text-left py-3 px-4"><a class="text-blue-500 hover:underline" href="{{ url_for('show_game', game_id=game.game_id) }}">{{ game.game_id }}</a></td>
            <td class="text-left py-3 px-4">{{ game.player_name|default('—', true) }}</td>
            <td class="text-left py-3 px-4 hidden md:table-cell">{{ email_link(game.player_email) }}</td>
            <td class="text-left py-3 px-4 hidden lg:table-cell">{{ game.play_time|default('—', true) }}</td>
            <td class="text-left py-3 px-4">{{ game.date }}</td>
        </tr>
        {%- endfor %}
    </tbody>
</table>
{%- endblock %}