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


{% block title %}
    Vielen Dank für Ihre Teilnahme an dieser Studie!
{% endblock %}


{% block content %}

    <div class="card card-body bg-light instructions">
        <strong>Über die gesamte Studie hatten Sie folgende Rolle:

            {% if player.type == "buyer" %}
            <span><u>KÄUFER</u></span>

            {% else %}
            <span><u>TEILNEHMER 2</u></span>

            {% endif %}

        </strong>

    </div>

<br>

    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text"> <strong>
            In Teil 1 wurde die Runde {{ group.round_payed }} zufällig ausgewählt.

            <br><br>

            {% if player.type == "buyer" %}

            {% if buyer_choice == 0 %}
            In dieser Runde haben Sie kein Produkt gekauft.

            {% elif buyer_choice == 1 %}
            In dieser Runde haben Sie das

            {% if product1 == 1 %}
            <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer 2: -60 Punkte</span></span>
            zu einem Preis von {% price1 %} Punkten gekauft.

            {% elif product1 == 0 %}
            <span class="tooltip1"><blue>Produkt BLAU</blue> <span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></span>
            zu einem Preis von {% price1 %} Punkten gekauft.

            {% endif %}

            {% elif buyer_choice == 2 %}
            In dieser Runde haben Sie das

            {% if product2 == 1 %}

            <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer 2: -60 Punkte</span></span>
            zu einem Preis von {% price2 %} Punkten gekauft.

            {% elif product2 == 0 %}
            <span class="tooltip1"><blue>Produkt BLAU</blue> <span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></span>
            zu einem Preis von {% price2 %} Punkten gekauft.

            {% endif %}

            {% endif %}


            {% elif player.type == "C" %}
            Der Käufer in dieser Runde hat

            {% if buyer_choice == 0 %}
            kein Produkt gekauft. Es entsteht kein Verlust für Sie.

            {% elif buyer_choice == 1 %}

            {% if product1 == 1 %}
            ein <orange>Produkt ORANGE</orange> gekauft, welches einen
            Verlust von 60 Punkten für Sie verursacht.

            {% elif product1 == 0 %}
            ein <blue>Produkt BLAU</blue> gekauft, welches keinen
            Verlust für Sie verursacht.

            {% endif %}

            {% elif buyer_choice == 2 %}

            {% if product2 == 1 %}
            ein <orange>Produkt ORANGE</orange> gekauft, welches einen
            Verlust von 60 Punkten für Sie verursacht.

            {% elif product2 == 0 %}
            ein <blue>Produkt BLAU</blue> gekauft, welches keinen
            Verlust für Sie verursacht.

            {% endif %}

            {% endif %}

            {% endif %}


         </p></strong>
    </div>

<br>

    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
            In der heutigen Studie erhalten Sie somit <strong>{% T2_payoff %} Punkte</strong>,
            das entspricht <strong>{{ final_payoff }}</strong>.
        </p>
    </div>

<br>

    <div class="card card-body bg-light instructions">
        <p class="card-text">
            Vielen Dank für Ihre Teilnahme an unserer Studie! Wir werden Ihre Auszahlung so schnell wie möglich
            vorbereiten und Sie gleich aufrufen. Bis dahin bitten wir Sie, ruhig und sitzen zu bleiben. Wir danken Ihnen
            für Ihre Geduld!
        </p>
    </div>

    <p></p>
    <p></p>
    <div align="right">{% next_button %} </div>
{% endblock %}


{% block styles %}
<style>
orange {font-weight: bold; color:orange;}
blue {font-weight: bold; color: blue;}
</style>

<style>
/* Tooltip container */
.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: 300px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
}

.tooltip1 .tooltiptext2 {
  visibility: hidden;
  width: 260px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip1 .tooltiptext2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}

.tooltip1:hover .tooltiptext2 {
  visibility: visible;
}
</style>
{% endblock %}