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


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


{% block content %}
    <div class="card card-body bg-light instructions">
        <p class="card-text">
            <strong>Bitte treffen Sie Ihre Kaufentscheidung.</strong> <i>Der Teilnehmer 2 in dieser Runde wird am Ende
            der Runde über das Ergebnis und damit über seine Punkte in der Runde informiert.</i>
        </p>
    </div>

    <div class="row justify-content-evenly mt-4">
        <div class="col-4">
            <div class="card border-primary">
                <h5 class="card-header bg-primary text-white text-center">Angebot 1</h5>
                <div class="card border-primary">
                    <table class="text-center">
                        <colgroup>
                            <col width="50%">
                            <col width="50%">
                        </colgroup>

                        <tr>
                            <td>
                                <p class="mt-4 mb-4">
                                    Produkt:
                                </p>
                            </td>
                            <td>
                                {% if product1 == 1 %}
                                    <div class="tooltip1"><orange>ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer 2: -60 Punkte</span></div>
                                {% elif product1 == 0 %}
                                    <div class="tooltip1 text-center"><blau>BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></div>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="card border-primary">
                    <table class="text-center">
                        <colgroup>
                            <col width="50%">
                            <col width="50%">
                        </colgroup>

                        <tr>
                            <td>
                                <p class="mt-4 mb-4">
                                    Preis:
                                </p>
                            </td>
                            <td>
                                <b>{% price1 %} Punkte</b>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="list-group-item card border-primary">
                    <div class="text-center mt-3 mb-3" >
                        <label class="btn btn-primary">
                            <input type="radio" name="buyer_choice" value="1" autocomplete="off"> Kaufen
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card border-primary">
                <h5 class="card-header bg-primary text-white text-center">Angebot 2</h5>
                <div class="card border-primary">
                    <table class="text-center">
                        <colgroup>
                            <col width="50%">
                            <col width="50%">
                        </colgroup>

                        <tr>
                            <td>
                                <p class="mt-4 mb-4">
                                    Produkt:
                                </p>
                            </td>
                            <td>
                                {% if product2 == 1 %}
                                    <div class="tooltip1"><orange>ORANGE</orange><span class="tooltiptext1">Verlust für Teilnehmer 2: -60 Punkte</span></div>
                                {% elif product2 == 0 %}
                                    <div class="tooltip1 text-center"><blau>BLAU</blau><span class="tooltiptext2">Kein Verlust für Teilnehmer 2</span></div>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="card border-primary">
                    <table class="text-center">
                        <colgroup>
                            <col width="50%">
                            <col width="50%">
                        </colgroup>

                        <tr>
                            <td>
                                <p class="mt-4 mb-4">
                                    Preis:
                                </p>
                            </td>
                            <td>
                                <b>{% price2 %} Punkte</b>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="list-group-item card border-primary">
                    <div class="text-center mt-3 mb-3">
                        <label class="btn btn-primary">
                            <input type="radio" name="buyer_choice" value="2" autocomplete="off"> Kaufen
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card border-primary" style="height: 281px">
                <h5 class="card-header bg-primary text-white text-center">Kein Kauf</h5>
                <div class="card border-primary"  style="height: 265px">
                    <div class="text-center mt-auto mb-4">
                        <label class="btn btn-primary">
                            <input type="radio" name="buyer_choice" value="0" autocomplete="off"> Kein Produkt kaufen
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="card card-body bg-light instructions">
        <p align="justify" class="card-text">
            Sobald Sie eine Entscheidung getroffen haben, klicken Sie bitte 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>
        <p> {{ include 'nosellers/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 %}