{{ block title }}

    {{ t.practice_results_title }}

{{ endblock }}



{{ block content }}



<div class="card shadow-sm">

    <div class="card-body">

        

        

        <p>

            {{ t.practice_results_intro }}

        </p>



        <table class="table table-bordered text-center align-middle mt-4 mb-4">

            <thead class="table-light">

                <tr>

                    <th style="width: 50%;">{{ t.practice_results_th_event }}</th>

                    <th>{{ t.practice_results_th_result }}</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td class="text-start">

                        <strong>{{ t.practice_results_participation }}</strong>

                    </td>

                    <td class="text-start">

                        {{ t.practice_results_participation_fee|safe }}

                    </td>

                </tr>        



                <tr>

                    <td class="text-start">

                        <strong>{{ t.practice_results_erase }}</strong>

                    </td>

                    <td class="text-start">

                        {{ practice_results_erase_td|safe }}

                    </td>

                </tr>



                <tr>

                    <td class="text-start">

                        <strong>{{ t.practice_results_matched }}</strong>

                    </td>

                    <td class="text-start">

                        {{ t.practice_results_matched_text|safe }}

                    </td>

                </tr>



                <tr>

                    <td class="text-start">

                        <strong>{{ t.practice_results_prediction }}</strong>

                    </td>

                    <td class="text-start">

                        {{ practice_results_prediction_td|safe }}

                    </td>

                </tr>

            </tbody>

        </table>



        <p class="text-center fs-5 fw-bold mt-4 mb-4">

            {{ t.practice_results_total_line }}

            <span class="text-success">1</span>

            {{ if cost_p1 > 0 }}

                - <span class="text-danger">{{ cost_p1 }}</span>

            {{ else }}

                + <span class="text-success">0</span>

            {{ endif }}

            {{ if cost_p2 > 0 }}

                - <span class="text-danger">{{ cost_p2 }}</span>

            {{ else }}

                + <span class="text-success">0</span>

            {{ endif }}

            + <span class="text-success">{{ bonus_p3 }}</span>

            =

            {{ if total_earnings > 0 }}

                <span class="text-success">{{ total_earnings }} {{ t.points_word }}</span>.

            {{ elif total_earnings < 0 }}

                <span class="text-danger">{{ total_earnings }} {{ t.points_word }}</span>.

            {{ else }}

                <span>{{ total_earnings }} {{ t.points_word }}</span>.

            {{ endif }}

        </p>



        <div class="alert alert-warning mt-4 text-center">

            <i class="bi bi-exclamation-triangle-fill"></i>

            {{ t.practice_results_warning|safe }}

        </div>



        <div class="d-flex justify-content-center mt-5">

            {{ next_button label=t.btn_next }}

        </div>



    </div>

</div>



{{ endblock }}



{{ block styles }}

<style>

    .otree-body { max-width: 850px; margin: 40px auto; font-family: 'Inter', system-ui, sans-serif; }

    .btn-primary { padding: 10px 35px; border-radius: 25px; font-weight: 600; }

</style>

{{ endblock }}