{{ block title }}
<div style="text-align: center;">
    {{ t.payment_title }}
</div>
{{ endblock }}

{{ block content }}

<br>

<div class="card"
     style="max-width:700px;
            margin:auto;
            padding:25px;
            text-align:center;">

    <h4>
        {{ t.payment_heading }}
    </h4>

    <p>
        {{ t.payment_p1|safe }}
    </p>

    <hr>

    <p>
        {{ t.payment_p2|safe }}
    </p>

    <p>
        {{ t.payment_games_intro }}
    </p>

    <ul style="text-align:left;
               max-width:400px;
               margin:auto;">

        <li>{{ t.payment_game_1 }}</li>

        <li>{{ t.payment_game_2 }}</li>

        <li>{{ t.payment_game_3 }}</li>

    </ul>

    <br>

    <p>
        {{ t.payment_p3|safe }}
    </p>

    <p>
        {{ t.payment_p4|safe }}
    </p>

    <p>
        {{ t.payment_p5|safe }}
    </p>

    <hr>

    <p>
        <strong>
            {{ t.payment_final_label }}
        </strong>
    </p>

    <p>
        <strong>
            {{ t.payment_final_formula|safe }}
        </strong>
    </p>

    <br>

    <p style="font-size:0.95em; color:#444;">
        {{ t.payment_footer|safe }}
    </p>

</div>

<br>
{{ if en }}
<img src="/static/Contents/a_payment_EN.png" width="720">
{{ else }}
<img src="/static/Contents/a_payment_ID.png" width="720">
{{ endif }}
<div style="text-align:center;">
    {{ next_button }}
</div>

{{ endblock }}