{{ block title }}
    Thank you for participating
{{ endblock }}

{{ block content }}

<style>
    .circle_green {
        border: 1px solid green; padding: 5px 5px; background: green;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_green_off {
        border: 2px solid green; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_red {
        border: 1px solid red; padding: 5px 5px; background: red;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_red_off {
        border: 2px solid red; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_blue {
        border: 1px solid blue; padding: 5px 5px; background: blue;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_blue_off {
        border: 2px solid blue; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
</style>

<p>You have reached the end of the experiment.</p>
<p>
    One machine was randomly selected (out of {{ n_machines }} total),
    and one of your predictions was randomly drawn.
    A random observation with the same light configuration was then drawn
    from that machine's data and compared to your prediction.
</p>

<p style="font-weight: bold; font-size: 1.1em; margin-bottom: 16px;">
    Click next or wait <span id="countdown">20</span> seconds to be redirected to the final page and completion code.
</p>

<h3 style="margin-bottom: 10px;">Payment Details</h3>
<table style="border-collapse: collapse; min-width: 400px;">
    <tr style="background: #f8f9fa;">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Randomly selected task</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">Machine {{ chosen_machine }}</td>
    </tr>
    <tr>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Randomly selected observation</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">
            {{ lights_html | safe }}&nbsp;&nbsp;Sound: <b>{{ correct_text }}</b>
        </td>
    </tr>
    <tr style="background: #f8f9fa;">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Your prediction</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">{{ guess_text }}</td>
    </tr>
    <tr>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Correct answer</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;
            color: {{ if is_correct }}#198754{{ else }}#dc3545{{ endif }};">
            {{ correct_text }} {{ if is_correct }}✓{{ else }}✗{{ endif }}
        </td>
    </tr>
    <tr style="background: {{ if is_correct }}#d4edda{{ else }}#f8d7da{{ endif }};">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Earnings added</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">
            {{ if is_correct }}<b>+{{ bonus | c }}</b>{{ else }}<b>+{{ C.CURRENCY }}0.00</b>{{ endif }}
        </td>
    </tr>
    <tr style="font-weight: bold; background: #f8f9fa;">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Total payment</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">{{ total_payment | c }}</td>
    </tr>
</table>

{{ next_button }}

<script>
    var secondsLeft = 20;
    var countdownEl = document.getElementById('countdown');
    var timer = setInterval(function () {
        secondsLeft -= 1;
        countdownEl.textContent = secondsLeft;
        if (secondsLeft <= 0) {
            clearInterval(timer);
            document.querySelector('form').submit();
        }
    }, 1000);
</script>

{{ endblock }}