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


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


{% block content %}

    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
            <strong>In der folgenden Tabelle sehen Sie Ihr Angebot sowie das Angebot des anderen Verkäufers in der
            Runde. Der Käufer wählt nun ein Produkt oder keines.</strong>
        </p>
    </div>

    <br><br>

    <table class='table table-bordered text-center' style=' width: auto; margin: auto'>
        <tr>
            <th>Verkäufer</th> <th>Produkt</th> <th>Preis</th>
        </tr>
        <tr>
            <td style="vertical-align: middle">Sie</td>
            <td style="vertical-align: middle">
                {% if seller2_product == 'X' %}
                    <div class="tooltip1"><orange>ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></div>
                {% else %}
                    <div class="tooltip1"><blau>BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                {% endif %}
            </td>
            <td style="vertical-align: middle">
                {% if seller2_product == 'X' %}
                    {% price_2X %}
                {% else %}
                    {% price_2Y %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td style="vertical-align: middle">Anderer Verkäufer</td>
            <td style="vertical-align: middle">
                {% if seller1_product == 'X' %}
                    <div class="tooltip1"><orange>ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></div>
                {% else %}
                    <div class="tooltip1"><blau>BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                {% endif %}
            </td>
            <td style="vertical-align: middle">
                {% if seller1_product == 'X' %}
                    {% price_1X %}
                {% else %}
                    {% price_1Y %}
                {% endif %}
            </td>
        </tr>
    </table>

    <br><br>

    <div class="card card-body bg-light instructions">
        <p class="card-text">
        Bitte klicken Sie auf „Weiter“, um mit der Studie fortzufahren.
        </p>
    </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>

<p></p>
<p></p>

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