{{ 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">

        {{ if en }}
            Practice Round <br>
            Round Number: {{ player.round_number }}
        {{ else }}
            Ronde Latihan <br>
            Ronde Nomor: {{ player.round_number }}
        {{ endif }}

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

{{ block content }}

<div class="game-wrapper">

    <div class="game-header">
        <div class="result-card">

            <h2 style="text-align:center;">
                💵

                {{ if en }}
                    Your Balance
                {{ else }}
                    Saldo Anda
                {{ endif }}

                <div class="balance-amount">
                    {{ participant.vars.balance }}
                </div>
            </h2>

        </div>
    </div>

    <br>

    <span style="text-align: left;">
            {{ if en }}
                <p style="color:white; " >
                How much would you like to bet in this round?<br>
                <span>Please choose from the available options below.</span>
                </p>
            {{ else }}
                <p style="color:white;">
                Berapa nominal yang hendak Anda pertaruhkan di ronde ini?<br>
                <span>Pilih dari pilihan yang tersedia di kotak di bawah ini.</span>
                </p>
            {{ endif }}
        {{ formfield 'bet_amount' }}
    </span>

    <br/>

    <div class="result-card">
        <p style="text-align:center;">

            {{ if en }}
                If you win this round:
            {{ else }}
                Jika Anda menang pada ronde ini:
            {{ endif }}

            <br>

            <div class="balance-amount">
                {{ multiplier }}×

                {{ if en }}
                    your bet
                {{ else }}
                    taruhan Anda
                {{ endif }}
            </div>

        </p>
    </div>

    <br/>

    <h4 class="choose-title">
        {{ if en }}
            Choose a side of the coin
        {{ else }}
            Pilih sisi koin
        {{ endif }}
    </h4>

    <div class="coin-choice">

        <!-- HEADS -->
        <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">
                {{ if en }}
                    Heads
                {{ else }}
                    Kepala
                {{ endif }}
            </div>
        </label>

        <!-- TAILS -->
        <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">
                {{ if en }}
                    Tails
                {{ else }}
                    Ekor
                {{ endif }}
            </div>
        </label>

    </div>

</div>

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

{{ endblock }}