{% extends 'base.html' %}

{% block title %}{{ _('Play Crash') }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/game.css') }}">
{% endblock %}

{% block nav %}
{{ super() }}
<!-- Recent Crashes Strip -->
<div class="recent-crashes" id="recentCrashes">
    <!-- Populated by JavaScript -->
</div>
{% endblock %}

{% block footer %}{% endblock %}

{% block content %}
<div class="game-container">
    <!-- Left Panel - Live Bets -->
    <div class="live-bets-panel">
        <div class="live-bets-header">
            <div class="live-bets-stats">
                <div class="stat-item">
                    <div class="stat-label">{{ _('Bets') }}</div>
                    <div class="stat-value" id="totalBets">0</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">{{ _('Total Bets') }}</div>
                    <div class="stat-value" id="totalWagered">0 XAF</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">{{ _('Total Won') }}</div>
                    <div class="stat-value" id="totalWon">0 XAF</div>
                </div>
            </div>
        </div>

        <div class="live-bets-table">
            <table class="bets-table">
                <thead>
                    <tr>
                        <th>{{ _('User') }}</th>
                        <th>{{ _('Odds') }}</th>
                        <th>{{ _('Bet') }}</th>
                        <th>{{ _('Win') }}</th>
                    </tr>
                </thead>
                <tbody id="liveBetsList">
                    <!-- Populated by JavaScript -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Center - Game Area -->
    <div class="game-area">
        <!-- Game Board -->
        <div class="game-board">
            <button class="tc-button" onclick="alert('{{ _('Terms and conditions apply. Play responsibly.') }}')">
                T&C
            </button>

            <div class="game-canvas-container">
                <canvas id="gameCanvas"></canvas>
            </div>

            <div class="multiplier-display">
                <div class="multiplier-value waiting" id="multiplierValue">{{ _('Starting...') }}</div>
            </div>

            <!-- Status Overlay -->
            <div class="game-status-overlay" id="gameStatusOverlay">
                <div class="status-content">
                    <div class="status-title" id="statusTitle">{{ _('Next Round') }}</div>
                    <div class="status-countdown" id="statusCountdown">--</div>
                    <div class="status-subtitle" id="statusSubtitle">{{ _('Place your bets!') }}</div>
                </div>
            </div>
        </div>

        <!-- History Panel -->
        <div class="history-panel">
            <div class="history-header">
                <i class="fas fa-history"></i>
                {{ _('History') }}
            </div>
            <div class="history-content">
                <div class="history-empty" id="historyEmpty">
                    <i class="fas fa-search"></i>
                    <p>{{ _("You haven't placed any bets yet") }}</p>
                </div>
                <table class="history-table" id="historyTable" style="display: none;">
                    <thead>
                        <tr>
                            <th>{{ _('Date') }}</th>
                            <th>{{ _('Bet') }}</th>
                            <th>{{ _('Odds') }}</th>
                            <th>{{ _('Win') }}</th>
                        </tr>
                    </thead>
                    <tbody id="historyList">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right Panel - Betting Controls -->
    <div class="betting-panel">
        <!-- Bet Card 1 -->
        <div class="bet-card">
            <div class="bet-card-header">
                <div class="auto-cashout-toggle">
                    <label class="toggle-switch">
                        <input type="checkbox" id="autoCashoutToggle">
                        <span class="toggle-slider"></span>
                    </label>
                    <span>{{ _('Enable AutoPlay') }}</span>
                </div>
            </div>

            <div class="bet-amount-input">
                <input type="number" id="betAmount" value="1000" min="100" max="500000" step="100">
                <button class="clear-btn"><i class="fas fa-times"></i></button>
                <span class="bet-amount-suffix">XAF</span>
            </div>

            <div class="quick-amounts">
                <button class="quick-amount-btn" data-amount="200">200</button>
                <button class="quick-amount-btn" data-amount="800">800</button>
                <button class="quick-amount-btn" data-amount="2000">2,000</button>
                <button class="quick-amount-btn" data-amount="6000">6,000</button>
                <button class="quick-amount-btn" data-amount="20000">20,000</button>
                <button class="quick-amount-btn" data-amount="70000">70,000</button>
            </div>

            <button class="place-bet-btn betting" id="placeBetBtn">
                <span id="betBtnText">{{ _('Place a Bet') }}</span>
                <div class="bet-btn-subtitle" id="betBtnSubtitle">{{ _('(in the next round)') }}</div>
            </button>

            <div class="auto-cashout-input" style="display: none;">
                <label>{{ _('Auto Cashout At') }}</label>
                <input type="number" id="autoCashoutAmount" step="0.01" min="1.01" placeholder="2.00x" value="2.00">
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    window.userId = Number("{{ current_user.id }}");
</script>
<script src="{{ url_for('static', filename='js/game.js') }}"></script>
{% endblock %}