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


{% block title %}
    Teil 1 - Ihr Angebot ({{ period }}/{{ Constants.num_rounds }})
{% endblock %}


{% block content %}

    <div class="card bg-light">
        <div class="card card-body bg-light instructions">
            {% if player.id_in_group == 1 %}
             <p align="justify" class="card-text">
                <b>
                    In dieser Runde bieten <u>Sie</u> das
                    <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>
                    an.
                    Für dieses Produkt können Sie einen Preis zwischen 0 und 50 Punkten festlegen.

                    <br><br>

                    <u>Der andere Verkäufer</u> in dieser Runde bietet das
                    {% if seller2_product == 'X' %}
                    <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>

                    {% else %}
                    <span class="tooltip1"><blau>Produkt BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></span>

                    {% endif %} an.
                </b>

<!--
                    <br><br>

                    Zur Erinnerung:
                </strong>
            </p>

            <ul class="card-text">
                <li>Das <orange>Produkt ORANGE</orange> verursacht einen Verlust von 60 Punkten für Teilnehmer C.</li>
                <li>Das <blau>Produkt BLAU</blau> verursacht keinen Verlust für Teilnehmer C.</li>
                <li>Der Teilnehmer C in dieser Runde wird am Ende der Runde über das Ergebnis und damit über seine Punkte in
                    der Runde informiert:</li>
            </ul>
-->

            {% elif player.id_in_group == 2 %}
            <p align="justify" class="card-text">
                <b>
                    In dieser Runde bieten <u>Sie</u> das
                    <span class="tooltip1"><orange>Produkt ORANGE</orange> <span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span> </span>
                    an.
                    Für dieses Produkt können Sie einen Preis zwischen 0 und 50 Punkten festlegen.

                    <br><br>

                    <u>Der andere Verkäufer</u> in dieser Runde bietet das
                    {% if seller1_product == 'X' %}
                    <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>

                    {% else %}
                    <span class="tooltip1"><blau>Produkt BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></span>

                    {% endif %} an.
                </b>

<!--
                    <br><br>

                    Zur Erinnerung:
                </strong>
            </p>

            <ul class="card-text">
                <li>Das <orange>Produkt ORANGE</orange> verursacht einen Verlust von 60 Punkten für Teilnehmer C.</li>
                <li>Das <blau>Produkt BLAU</blau> verursacht keinen Verlust für Teilnehmer C.</li>
                <li>Der Teilnehmer C in dieser Runde wird am Ende der Runde über das Ergebnis und damit über seine Punkte in
                    der Runde informiert:</li>
            </ul>
-->
            {% endif %}


        </div>

        <div class="card card-body bg-light instructions">
            {% if player.id_in_group == 1 %}
            <span align="justify" class="card-text">
                <b>
                   Bitte wählen Sie den Preis, den Sie für das
                   <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>
                   verlangen möchten:
                </b>
                {% formfield player.seller_price_X %}
            </span>

            {% elif player.id_in_group == 2 %}
            <span align="justify" class="card-text">
                <b>
                   Bitte wählen Sie den Preis, den Sie für das
                   <span class="tooltip1"><orange>Produkt ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></span>
                   verlangen möchten:
                </b>
                {% formfield player.seller_price_X %}
            </span>

            {% endif %}

        <p align="justify" class="card-text">
            Sobald Sie eine Entscheidung getroffen haben, klicken Sie bitte auf „Weiter“, um mit der Studie fortzufahren.
        </p>
        </div>

    </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>

            {{ include 'sellers/P00_Ausrolloptionen.html' }} </p>

    </details>

{% 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 %}