{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Vielen Dank, dass Sie an unserem Experiment teilgenommen haben!{% endblock %}

{% block content %}
<div class="debug" style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
    Debug-ID:<br>
    {{player.vp_helpCode}}
</div>
{% if g_teilnahme_temp == "geld" %}
<p>Ihre Teilnahmegebühr: 4€
</p>
{% endif %}

<table class="table">
  <tr>
      <th>Ihre Gewinne:</th>
  </tr>
      <tr>
          <td>Runde 1: </td>
          <td>{{ g1_temp }}</td>
      </tr>
      <tr>
          <td>Runde 2: </td>
          <td>{{ g2_temp }}</td>
      </tr>
      <tr>
          <td>Runde 3: </td>
          <td>{{ g3_temp }}</td>
      </tr>
      <tr>
          <td>Runde 4: </td>
          <td>{{ g4_temp }}</td>
      </tr>
</table>

<p><b>Gesamtsumme: {{ g_gesamt_temp }}</b></p>

<p>
    Hier finden sie noch einmal Ihren Verifizierungscode (+ Sicherheitsnummer), den sie bitte in folgende Umfrage eintragen <b><a href="https://www.umfrageonline.com/s/be49a15" target="_blank">https://www.umfrageonline.com/s/be49a15</a></b>.
</p>
<p>
    Verifizierungscode:
</p>
<p>
    <b>{{veriCode2}}</b>
</p>
<button class="otree-btn-next btn btn-primary next-button otree-next-button">Weiter</button>
{% endblock %}
{% block scripts %}
    <script>
        $(function () {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                if (event.offset.totalSeconds === 10) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>
{% endblock %}
{% block app_styles %}
<style>
    .otree-timer {
        display: none;
    }
    .chat-instructions{
        font-size: 0.8rem;
    }
    .chat-instructions > br{
        margin: 1px 0;
    }
    .debug{
        margin: 5px 10px;
    }
    br {
        display: block;
        margin: 5px 0;
        }
    body {
        font-size: 1rem;
        font-weight: 370;
        line-height: 1.3;
    }
</style>
{% endblock %}