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


{% block title %}
    Teil 1 - Ergebnis dieser Runde ({{ period }}/{{ Constants.num_rounds }})
{% endblock %}


{% block content %}
    <div class="card card-body bg-light instructions">
    <b>
    <ul align="justify">

        {% if buyer_choice == 0 %}

            {% if player.type == "buyer" %}
                <li>In dieser Runde haben Sie sich dafür entschieden, kein Produkt zu kaufen.</li>
                <li>Es entsteht kein Verlust für den Teilnehmer 2 in dieser Runde.</li>
                <li>Ihre Auszahlung in dieser Runde: <u>80 Punkte</u></li>

            {% elif player.type == "C" %}
                <li>Der Käufer in dieser Runde hat kein Produkt gekauft.</li>
                <li>Es entsteht kein Verlust für Sie.</li>
                <li>Ihre Auszahlung in dieser Runde: <u>80 Punkte</u></li>

            {% endif %}

        {% elif buyer_choice == 1 %}

            {% if player.type == "buyer" %}
                <li>In dieser Runde haben Sie sich dafür entschieden, das

                {% if product1 == 1 %}
                    <orange>Produkt ORANGE</orange> zu einem Preis von {% price1 %} Punkten zu kaufen.</li>
                <li>Der Kauf verursacht einen Verlust von 60 Punkten für den Teilnehmer 2 in dieser Runde.</li>

                {% else %}
                    <blau>Produkt BLAU</blau> zu einem Preis von {% price1 %} Punkten zu kaufen.</li>
                <li>Es entsteht kein Verlust für den Teilnehmer 2 in dieser Runde.</li>

                {% endif %}
                <li>Ihre Auszahlung in dieser Runde: <u>{% buyer %} Punkte</u></li>

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

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

                {% else %}
                    <blau>Produkt BLAU</blau> gekauft,
                    welches keinen Verlust für Sie verursacht.</li>

                {% endif %}
                <li>Ihre Auszahlung in dieser Runde: <u>{% TC %} Punkte</u></li>

            {% endif %}

        {% elif buyer_choice == 2 %}

            {% if player.type == "buyer" %}
                <li>In dieser Runde haben Sie sich dafür entschieden, das

                {% if product2 == 1 %}
                    <orange>Produkt ORANGE</orange> zu einem Preis von {% price2 %} Punkten zu kaufen.</li>
                <li>Der Kauf verursacht einen Verlust von 60 Punkten für den Teilnehmer 2 in dieser Runde.</li>

                {% else %}
                    <blau>Produkt BLAU</blau> zu einem Preis von {% price2 %} Punkten zu kaufen.</li>
                <li>Es entsteht kein Verlust für den Teilnehmer 2 in dieser Runde.</li>

                {% endif %}
                <li>Ihre Auszahlung in dieser Runde: <u>{% buyer %} Punkte</u></li>

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

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

                {% else %}
                    <blau>Produkt BLAU</blau> gekauft,
                    welches keinen Verlust für Sie verursacht.</li>

                {% endif %}
                <li>Ihre Auszahlung in dieser Runde: <u>{% TC %} Punkte</u></li>

            {% endif %}

        {% endif %}


    </ul>
    </b>
        Bitte klicken Sie auf „Weiter“, um mit der Studie fortzufahren.
    </div>

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

    <hr>

    <details>
        <summary>
            <b>Klicken Sie bitte <u>hier</u>, um die Instruktionen zu Teil 1 noch einmal zu lesen.</b>
        </summary>
        <p> {{ include 'nosellers/P00_Ausrolloptionen.html' }} </p>
    </details>

{% endblock %}

{% block scripts %}
    <script>

        $(document).ready(function() {
            document.title = 'Ergebnis dieser Runde';
        });

    </script>
{% endblock %}


{% block styles %}
<style>
orange {font-weight: bold; color:orange;}
blau {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 %}