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


{% block content %}
    <div class="card card-body bg-light instructions">
        <p class="card-text">
            <b>Bitte treffen Sie Ihre Kaufentscheidung.</b> <i>Der Teilnehmer C 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">
                {% if offer_order == 0 %}
                    <h5 class="card-header bg-primary text-white text-center">Verkäufer 1</h5>
                {% else %}
                    <h5 class="card-header bg-primary text-white text-center">Verkäufer 2</h5>
                {% endif %}

                <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">
                                    Produktart:
                                </p>
                            </td>
                            <td>
                                {% if offer_order == 0 %}
                                    {% if seller1_product == 'X' %}
                                        <div class="tooltip1"><b>Produkt <i>X</i></b><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></div>
                                    {% else %}
                                        <div class="tooltip1 text-center"><b>Produkt <i>Y</i></b><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                                    {% endif %}
                                {% else %}
                                    {% if seller2_product == 'X' %}
                                        <div class="tooltip1"><b>Produkt <i>X</i><span class="tooltiptext1">Verlust für Teilnehmenr C: -60 Punkte</span></div>
                                    {% else %}
                                        <div class="tooltip1"><b>Produkt <i>Y</i></b><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                                    {% endif %}
                                {% 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>
                                {% if offer_order == 0 %}
                                    {% if seller1_product == 'X' %}
                                        <b>{% price_1X %} Punkte</b>
                                    {% else %}
                                        <b>{% price_1Y %} Punkte</b>
                                    {% endif %}
                                {% else %}
                                    {% if seller2_product == 'X' %}
                                        <b>{% price_2X %} Punkte</b>
                                    {% else %}
                                        <b>{% price_2Y %} Punkte</b>
                                    {% endif %}
                                {% endif %}
                            </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">
                {% if offer_order == 0 %}
                    <h5 class="card-header bg-primary text-white text-center">Verkäufer 2</h5>
                {% else %}
                    <h5 class="card-header bg-primary text-white text-center">Verkäufer 1</h5>
                {% endif %}

                <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">
                                    Produktart:
                                </p>
                            </td>
                            <td>
                                {% if offer_order == 0 %}
                                    {% if seller2_product == 'X' %}
                                        <div class="tooltip1"><b>Produkt <i>X</i></b><span class="tooltiptext1">Verlust für Teilnehmer C: -60 Punkte</span></div>
                                    {% else %}
                                        <div class="tooltip1"><b>Produkt <i>Y</i></b><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                                    {% endif %}
                                {% else %}
                                    {% if seller1_product == 'X' %}
                                        <div class="tooltip1"><b>Produkt <i>X</i></b><span class="tooltiptext1">Verlust für Teilnehmenr C: -60 Punkte</span></div>
                                    {% else %}
                                        <div class="tooltip1"><b>Produkt <i>Y</i></b><span class="tooltiptext2">Kein Verlust für Teilnehmer C</span></div>
                                    {% endif %}
                                {% 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>
                                {% if offer_order == 0 %}
                                    {% if seller2_product == 'X' %}
                                        <b>{% price_2X %} Punkte</b>
                                    {% else %}
                                        <b>{% price_2Y %} Punkte</b>
                                    {% endif %}
                                {% else %}
                                    {% if seller1_product == 'X' %}
                                        <b>{% price_1X %} Punkte</b>
                                    {% else %}
                                        <b>{% price_1Y %} Punkte</b>
                                    {% endif %}
                                {% endif %}
                            </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>Instruktionen Teil 2 (gesamt):</b> Klicken Sie hier, um die Instruktionen zu Teil 2 noch einmal zu lesen.
        </summary>
        <p>{{ include 'sellers2/ZZZ_T2_Ausrolloptionen.html' }}</p>
    </details>
{% endblock %}


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