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


{{ block title }}
<div style="text-align: center;">
Instruksi Permainan: Menghindar dari Bom!
</div>
{{ endblock }}

{{ block content }}

<div class="consent">
    <p>
        Selanjutnya, Anda akan melihat sebuah matriks berukuran {{ NUM_ROWS }} × {{ NUM_COLS }}
        dengan total {{ num_boxes }} kotak di layar Anda.
    </p><br>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Blank_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">{{ NUM_ROWS }} × {{ NUM_COLS }} dalam permainan</p></strong></p>
    </div>
    <br>

    <p>
        Untuk memulai permainan, Anda dapat memilih kotak mana pun yang tersedia.
        Anda boleh memilih sebanyak mungkin kotak yang Anda inginkan.
        Kotak yang dipilih akan ditandai dengan tanda centang.
        Untuk setiap kotak yang Anda pilih, Anda akan memperoleh Rp {{ BOX_VALUE }}.
    </p><br>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Chosen_Matrix_2_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Memilih kotak dengan mengklik kotak yang diinginkan.</p></strong></p>
    </div><br>

    <p>
        Jika Anda berubah pikiran, Anda dapat mengklik kembali kotak yang sudah dipilih
        untuk membatalkan pilihan tersebut.
   </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Undo_Matrix_2_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Membatalkan pilihan dengan mengklik kembali kotak tersebut.</p></strong></p>
    </div><br>


    <p>
        <span style="color: red;">
            Namun, di balik salah satu kotak terdapat <strong>sebuah bom</strong>
            yang akan menghancurkan semua kotak yang telah Anda kumpulkan.
        </span>
        Bom tersebut akan ditempatkan secara acak dengan peluang yang sama
        pada setiap kotak. Posisi bom akan diacak oleh sistem pada setiap putaran.
    </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Bomb_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Bom terpilih.</p></strong></p>
    </div><br>

    <p>
        Tugas Anda adalah memilih kotak mana saja yang Anda inginkan.
        Setelah Anda puas dengan pilihan Anda, tekan tombol <em>"Stop"</em>
        kapan saja. Kemudian tekan tombol <em>"Solve"</em> untuk melihat
        apa yang terdapat di balik kotak-kotak tersebut.
        Jika kotak yang berisi bom termasuk dalam kotak yang Anda pilih,
        bom akan meledak dan Anda tidak akan menerima apa pun.
        Namun, jika Anda hanya memilih kotak yang tidak berisi bom,
        Anda akan menerima bonus sebesar total nilai yang telah Anda kumpulkan.
    </p>

    <p>
        Tidak ada batas waktu dalam permainan ini, sehingga Anda dapat
        meluangkan waktu untuk berpikir sebelum memilih kotak yang Anda inginkan.
    </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Stop_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Setelah selesai memilih kotak, klik "Stop".</p></strong></p>
    </div>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Solved_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Setelah menekan "Stop", klik "Solve" untuk melihat isi kotak.</p></strong></p>
    </div><br>

    <p>
        Anda akan diberikan dua (2) putaran latihan untuk mencoba permainan ini
        sebelum memulai permainan yang sebenarnya.
        Hasil dari putaran latihan <strong>tidak</strong> akan dihitung
        dalam pembayaran akhir Anda.
    </p>

    <p>Klik "Next" untuk melanjutkan ke putaran latihan.</p>

</div>

<button class="btn btn-primary btn-lg" type="submit">
Mulai Putaran Latihan
</button>

{{ endblock }}