{{ block styles }}
<link rel="stylesheet" href="{{ static 'coin_flip.css' }}">
{{ endblock }}

{{ block title }}
<div class="game-wrapper" style="text-align: center; color: lime">
    <div class="result-card">
        Practice Round <br>
        Round Number: {{ player.round_number }}
    </div>
</div>
{{ endblock }}

{{ block content }}
<br>
<div class="game-wrapper">
<div class="game-header">
    <div class="result-card">
        <h2 style="text-align:center;">💵 Your Balance
            <div class="balance-amount"> {{ participant.vars.balance }}</div>
        </h2>
    </div>
</div>

    <br>
<span style="text-align: left;">
{{ formfield 'bet_amount' }}
</span>

    <div class="result-card">
    <p style="text-align:center;">
        If you win this round:<br>
        <strong><div class="balance-amount">{{ multiplier }}× bet</div></strong>
    </p>
        </div>


<h4 class="choose-title">Choose a side of the coin</h4>

    <div class="coin-choice">

        <label class="coin-option">
            <input type="radio" name="choice" value="H">

            <div class="coin-card">
                <img src="{{ static 'Coin_Head2.png' }}" width="220">
            </div>

            <div class="coin-label">Heads</div>
        </label>

        <label class="coin-option">
            <input type="radio" name="choice" value="T">

            <div class="coin-card">
                <img src="{{ static 'Coin_Tail2.png' }}" width="220">
            </div>

            <div class="coin-label">Tails</div>
        </label>

    </div>

</div>



<div class="next-btn-center">
    {{ next_button }}
</div>

{{ endblock }}