{% extends 'base.html.twig' %}

{% block title %}Live Racing{% endblock %}

{% block body %}
<div class="container page-container" style="padding-top: 16px; padding-bottom: 100px;">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">Live Racing</h2>
            <p class="mb-0" style="color:#ffffff;">{{ "now"|date('l, F j, Y') }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('app_play_live_racing_results') }}" class="btn btn-outline-secondary" data-testid="link-live-racing-results">
                Race Results
            </a>
            <a href="{{ path('app_play_live_racing_history') }}" class="btn btn-outline-secondary" data-testid="link-live-racing-history">
                Bet History
            </a>
        </div>
    </div>

    <div class="text-center py-5" data-testid="live-racing-empty-state">
            <h3 style="color:#ffffff;">No Events Today</h3>
            <p style="color:#ffffff !important;">There are no live racing events scheduled for today. Check back later for upcoming races.</p>
        </div>

</div>

{# Wallet Bar #}
<div class="wallet-bar" data-testid="wallet-bar">
    <div class="wallet-bar__balance"
         data-controller="balance-counter"
         data-balance-counter-amount-value="{{ app.user.walletBalance }}">
        <p class="wallet-bar__label">Balance</p>
        <p class="wallet-bar__amount" data-testid="wallet-bar-amount"
           data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
    </div>
    <div class="wallet-bar__actions">
        <a href="{{ path('app_deposit') }}"
           class="pill-link--ghost"
           style="font-size: 12px; padding: 7px 14px;"
           data-testid="wallet-bar-add-funds">+ Add Funds</a>
    </div>
</div>

{% endblock %}