{{ block title }}
   Runde {{player.round_number}}: Wahl des Anbieters
{{ endblock }}
{{ block content }}

<div>

    In dieser Runde können Sie aus der Gruppe der folgenden drei Anbietern auswählen, mit welchem Anbieter Sie eine Transaktion eingehen möchten.
    <br><br>
    Die drei Anbieter (X, Y und Z) haben jeweils eine durchschnittliche Bewertung auf Basis der Transaktionen mit früheren Kunden erhalten. Die Anbieterbezeichnung wird dabei in jeder Runde neu und zufällig zugewiesen.

</div> <br><br>
{{if Normal}}

    <div>

    <table>
    <tr>
        <th>Anbieter</th>
        <th class="mx-auto" style="width: 200px"></th>
        <th>Durchschnittliche Bewertung</th>
    </tr>
    <tr>
        <td>Anbieter X </td>
        <td></td>
        <td style="text-align: center">{{x}} von 5</td>
    </tr>
    <tr>
        <td>Anbieter Y </td>
        <td></td>
        <td style="text-align: center">{{y}} von 5</td>
    </tr>

    <tr>
        <td>Anbieter Z
        <td></td>
        <td style="text-align: center">{{z}} von 5</td>
    </tr>


    </table>
<br><br>
    </div>

{{else}}
    <div>

    <table>
    <tr>
        <th>Anbieter</th>
        <th class="mx-auto" style="width: 200px"></th>
        <th>Durchschnittliche Bewertung</th>
    </tr>
    <tr>
        <td>Anbieter X {{p1}}</td>
        <td></td>
        <td style="text-align: center">{{x}} von 5</td>
    </tr>
    <tr>
        <td>Anbieter Y {{p2}}</td>
        <td></td>
        <td style="text-align: center">{{y}} von 5</td>
    </tr>

    <tr>
        <td>Anbieter Z{{p3}}
        <td></td>
        <td style="text-align: center">{{z}} von 5</td>
    </tr>


    </table>
<br><br>
    </div>
{{endif}}
<div>

<div>
    In dieser Gruppe beträgt die durch einen der Anbieter in Termin 1 erzielte niedrigste durchschnittliche Punktzahl: <b> {{min}}</b>. Die durch einen der Anbieter in Termin 1 erzielte höchste durchschnittliche Punktzahl der Gruppe liegt bei
    <b>{{max}}</b>. Ihnen ist jedoch nicht bekannt, welcher Anbieter die durchschnittlich niedrigste oder höchste Punktzahl erzielt hat. <br><br>
    Bitte geben Sie an, mit welchem Anbieter Sie am liebsten, am zweitliebsten und am wenigsten gern eine Transaktion eingehen möchten.
    Sie bekommen anschließend einen Anbieter mittels folgendem Verfahren zugeordnet. Die gleiche Anzahl an
    Anbietern wird je nach Anzahl der Teilnehmer entweder einem oder zwei weiteren Teilnehmern in der Spielerrolle des Kunden gezeigt.
    Nachdem jeder von Ihnen ihre/seine Präferenzauswahl bestätigt hat, wird per Zufall eine Reihenfolge festgelegt, nach der Ihre Auswahl bearbeitet wird. Sobald Sie als Kunde an der Reihe sind, wird versucht, Ihnen den Anbieter zuzuordnen, mit dem Sie am liebsten zusammenspielen möchten. Sollte dieser Anbieter schon vergeben sein, so wird versucht, Ihnen Ihre zweite Präferenz zuzuordnen.
    Falls auch dieser Anbieter vergeben sein sollte, wird Ihnen der Anbieter zugewiesen, den Sie an dritter Stelle genannt haben.
    Nach Beendigung des Verfahrens erfahren Sie, ob Sie Ihre Erst-, Zweit-, oder Drittpräferenz erhalten haben. <br><br>
    </div>
      <div class="border border-dark">
        <div class="pt-lg-2 p-lg-2 bg-light">
            <form id="yourFormId" action="submit">

                 <p>
               {{formfield 'chooser_first'}}
                 </p>
                <p>
               {{formfield 'chooser_second'}}
                </p>
                <p>
               {{formfield 'chooser_third'}}
                </p>
            </form>
        </div></div>
    <br><br>
<!--    <div>-->
<!--    <button class="nexttab btn-primary btn next">Auswahl bestätigen</button>-->
<!--    </div>-->
<div>
  <button id="verifyButton" class="nexttab btn-primary btn next" type="button" onclick="validateSelection()">Auswahl abschicken</button>
  <button id="submitButton" class="nexttab btn-primary btn next" type="submit" style="display: none;">Auswahl bestätigen</button>
</div>

<script>

function validateSelection() {
  var first = parseInt(document.getElementById("id_chooser_first").value);
  var second = parseInt(document.getElementById("id_chooser_second").value);
  var third = parseInt(document.getElementById("id_chooser_third").value);

  if (first === second || first === third || second === third) {
    alert("Bitte wählen Sie für jede Präferenz einen unterschiedlichen Anbieter.");
    return false;
  } else {
    // Submit the form
    document.getElementById("submitButton").click();
  }
}
</script>

{{ endblock }}