{% extends 'base.html' %}

{% block title %}{{ _('Verify Round') }} #{{ game_round.id }}{% endblock %}

{% block content %}
<div class="page-container" style="max-width: 700px; margin: 0 auto; padding: var(--spacing-2xl);">
    <h1><i class="fas fa-shield-alt text-accent"></i> {{ _('Verify Round') }} #{{ game_round.id }}</h1>

    <div class="card mb-3">
        <h3>{{ _('Round Details') }}</h3>

        <div style="display: grid; gap: var(--spacing-md);">
            <div>
                <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Crash Point') }}</label>
                <div
                    class="crash-point-value {% if game_round.crash_point >= 2 %}crash-high{% elif game_round.crash_point >= 1.5 %}crash-medium{% else %}crash-low{% endif %}">
                    {{ "%.2f"|format(game_round.crash_point) }}x
                </div>
            </div>

            <div>
                <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Round Hash') }}</label>
                <code
                    style="display: block; padding: var(--spacing-sm); background: var(--bg-tertiary); border-radius: var(--radius-sm); word-break: break-all; font-size: 0.8rem;">
                    {{ game_round.round_hash }}
                </code>
            </div>

            <div>
                <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Server Seed') }}</label>
                <code
                    style="display: block; padding: var(--spacing-sm); background: var(--bg-tertiary); border-radius: var(--radius-sm); word-break: break-all; font-size: 0.8rem;">
                    {{ game_round.server_seed }}
                </code>
            </div>

            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md);">
                <div>
                    <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Total Bets') }}</label>
                    <div style="font-weight: 600;">{{ game_round.total_bets }}</div>
                </div>
                <div>
                    <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Wagered') }}</label>
                    <div style="font-weight: 600;">{{ "{:,.0f}".format(game_round.total_wagered) }} XAF</div>
                </div>
                <div>
                    <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Won') }}</label>
                    <div style="font-weight: 600; color: var(--success);">{{ "{:,.0f}".format(game_round.total_won) }}
                        XAF</div>
                </div>
            </div>

            <div>
                <label style="color: var(--text-muted); font-size: 0.85rem;">{{ _('Played At') }}</label>
                <div>{{ game_round.crashed_at.strftime('%d/%m/%Y %H:%M:%S') if game_round.crashed_at else '-' }}</div>
            </div>
        </div>
    </div>

    <div class="card">
        <h3>{{ _('How to Verify') }}</h3>
        <ol style="color: var(--text-secondary); padding-left: var(--spacing-lg);">
            <li>{{ _('Copy the Server Seed above') }}</li>
            <li>{{ _('Hash it using SHA-256 (use any online tool)') }}</li>
            <li>{{ _('The result should match the Round Hash') }}</li>
            <li>{{ _('Use our verification tool to calculate the crash point') }}</li>
        </ol>

        <div class="mt-2">
            <a href="{{ url_for('main.provably_fair') }}" class="btn btn-primary">
                <i class="fas fa-calculator"></i> {{ _('Use Verification Tool') }}
            </a>
        </div>
    </div>
</div>
{% endblock %}