{% extends 'base.html' %}

{% block title %}{{ _('My Bets History') }}{% endblock %}

{% block content %}
<div class="page-container" style="max-width: 1000px; margin: 0 auto; padding: var(--spacing-2xl);">
    <h1><i class="fas fa-history text-accent"></i> {{ _('My Bets History') }}</h1>

    <div class="card">
        {% if bets.items %}
        <table class="bets-table" style="width: 100%;">
            <thead>
                <tr>
                    <th>{{ _('Date') }}</th>
                    <th>{{ _('Round') }}</th>
                    <th>{{ _('Bet') }}</th>
                    <th>{{ _('Multiplier') }}</th>
                    <th>{{ _('Profit') }}</th>
                    <th>{{ _('Status') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for bet in bets.items %}
                <tr>
                    <td>{{ bet.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                    <td>#{{ bet.round_id }}</td>
                    <td>{{ "{:,.0f}".format(bet.amount) }} XAF</td>
                    <td class="{% if bet.cashed_out %}text-success{% else %}text-danger{% endif %}">
                        {% if bet.cashed_out %}
                        {{ "%.2f"|format(bet.cashout_multiplier) }}x
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td class="{% if bet.profit > 0 %}text-success{% elif bet.profit < 0 %}text-danger{% endif %}">
                        {{ "{:+,.0f}".format(bet.profit) }} XAF
                    </td>
                    <td>
                        {% if bet.cashed_out %}
                        <span style="color: var(--success);">✓ {{ _('Won') }}</span>
                        {% else %}
                        <span style="color: var(--danger);">✗ {{ _('Lost') }}</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% if bets.pages > 1 %}
        <div style="display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-lg);">
            {% if bets.has_prev %}
            <a href="{{ url_for('game.history', page=bets.prev_num) }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-chevron-left"></i>
            </a>
            {% endif %}

            <span style="padding: 0.5rem 1rem;">
                {{ bets.page }} / {{ bets.pages }}
            </span>

            {% if bets.has_next %}
            <a href="{{ url_for('game.history', page=bets.next_num) }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-chevron-right"></i>
            </a>
            {% endif %}
        </div>
        {% endif %}

        {% else %}
        <div class="text-center" style="padding: var(--spacing-2xl);">
            <i class="fas fa-dice"
                style="font-size: 4rem; color: var(--text-muted); margin-bottom: var(--spacing-md);"></i>
            <p class="text-muted">{{ _("You haven't placed any bets yet.") }}</p>
            <a href="{{ url_for('game.play') }}" class="btn btn-primary">
                <i class="fas fa-gamepad"></i> {{ _('Start Playing') }}
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}