{{ block title }}
{{ endblock }}

{{ block content }}

<style>
    .choice-box {
        font-family: serif;
        font-size: 20px;
        line-height: 1.6;
        max-width: 1000px;
    }

    .choice-title {
        font-weight: bold;
        margin-bottom: 24px;
    }

    .choice-text {
        margin-bottom: 22px;
    }

    .choice-options {
        margin-top: 18px;
        margin-left: 24px;
        margin-bottom: 30px;
    }

    .choice-option {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
    }

    .choice-option input[type="radio"] {
        margin-top: 8px;
        transform: scale(1.0);
    }

    .otree-btn-next {
        font-size: 20px !important;
    }
</style>

<div class="choice-box">
    <div class="choice-title">
        Pilihan Pembayaran Putaran 4
    </div>

    <div class="choice-text">
        Jumlah jawaban benar Anda pada <strong>Putaran 1</strong> adalah <strong>[{{ player.num_correct }}]</strong>.
    </div>

    <div class="choice-text">
        Silakan pilih cara pembayaran yang Anda inginkan untuk hasil kerja tersebut pada <strong>Putaran 4</strong> ini:
    </div>

    <div class="choice-options">
        <label class="choice-option">
            <input type="radio" name="round4_scheme" value="piece_rate">
            <span>Bayaran per Jawaban Benar</span>
        </label>

        <label class="choice-option">
            <input type="radio" name="round4_scheme" value="tournament">
            <span>Kompetisi</span>
        </label>
    </div>
</div>

{{ next_button }}

<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector(".otree-btn-next");
    if (btn) {
        btn.textContent = "Lanjut";
    }
});
</script>

{{ endblock }}