{% extends 'layout.html' %}

{% block title %}Game {{ game.game_id}}{% endblock %}

{% block content -%}

{% from 'components.html' import boxed_section, game_data, email_link %}

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

    {% call boxed_section('Game Information', padding='') %}
    <dl>
        {{ game_data('Payed at', game.payed_at, 'gray-50') }}
        {{ game_data('Player Name', game.player_name|default('—', true), 'white') }}
        {{ game_data('Player Email', email_link(game.player_email), 'gray-50') }}
        {{ game_data('Started at', game.started_at|default('—', true), 'white') }}
        {{ game_data('Play Time', game.play_time|default('—', true), 'gray-50') }}
    </dl>
    {% endcall %}

    {% call boxed_section('Clues Used') %}
    {%- if clues %}
    <p>A total of {{ clues|count() }}&nbsp;clues were used:</p>
    <ul class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
        {% for clue in clues %}
        <li class="inline-block px-5 py-3">{{ clue }}</li>
        {%- endfor %}
    </ul>
    {% else %}
    <p>No clue used.</p>
    {% endif %}
    {% endcall %}

    {% call boxed_section('PayPal Data', class='md:col-span-2') %}
    <pre
        class="border-t border-gray-200 px-4 py-5 bg-gray-900 text-gray-200">{{ game.paypal_data|default('No data available.', true) }}</pre>
    {% endcall %}

</div>

{%- endblock %}