{{ 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">
        Real 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"> {{ 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 }}× your 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 }}