{{ block title }}
    Runde {{round_display}}: Wahl des Anbieters
{{ endblock }}

{{block style}}
<style>
    button {
        width: 100%;
        cursor: pointer; /* Changes cursor to pointer on hover over buttons */
    }
    .width-table-content{
        width: 200px;
    }
</style>

{{endblock}}
{{ block content }}

<div style="text-align: justify">

    In dieser Runde stehen Ihnen die folgenden Anbieter X, Y und Z als mögliche Transaktionspartner zur Auswahl. Bitte beachten Sie, dass die Anbieterbezeichnung in jeder Runde neu und zufällig zugewiesen wird.
    <br><br>
    {{ if subsession.SHOW_PROVIDERS_PERFORMANCE_AVERAGE }}
    In dieser Gruppe beträgt die durchschnittlich erzielte Punktzahl: <b> {{group_average | to2}}</b>. Die durchschnittliche Punktzahl der einzelnen Anbieter ist Ihnen nicht bekannt.
    <br><br>
    {{ endif }}
    Die drei Anbieter (X, Y und Z) haben jeweils eine durchschnittliche Bewertung auf Basis der Transaktionen mit früheren Kunden erhalten.
    </div>

    <div>
       <table>
        <tr>
            <th>Anbieter</th>
            <th class="mx-auto width-table-content"></th>
            <th>Durchschnittliche Bewertung</th>
        </tr>
        <tr>
            <td>Anbieter {{seller_1_label}} </td>
            <td></td>
            <td class="mx-auto width-table-content">{{seller_1 |to2 }} von 5</td>
        </tr>
        <tr>
            <td>Anbieter {{seller_2_label}} </td>
            <td></td>
            <td class="mx-auto width-table-content">{{seller_2 |to2}} von 5</td>
        </tr>
        <tr>
            <td>Anbieter {{seller_3_label}} </td>
            <td></td>
            <td class="mx-auto width-table-content">{{seller_3 |to2}} von 5</td>
        </tr>
    </table> </div>

<br>
<div>
    Bitte geben Sie an, mit welchem Anbieter Sie am liebsten, am zweitliebsten und am wenigsten gern eine Transaktion eingehen möchten.
    <br><br> Zur Erinnerung: Die Berücksichtigung Ihrer angegebenen Präferenzen findet wie folgt statt. Per Zufall wird 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 'market_interaction_choice_1'}}
             </p>
            <p>
           {{formfield 'market_interaction_choice_2'}}
            </p>
            <p>
           {{formfield 'market_interaction_choice_3'}}
            </p>
        </form>
    </div>
</div><br><br>
<div id="nextButtonDiv">
    <button class="btn btn-primary" 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>
{{endblock}}
{{ block script}}
<script>
function validateSelection() {
  var first = parseInt(document.getElementById("id_market_interaction_choice_1").value);
  var second = parseInt(document.getElementById("id_market_interaction_choice_2").value);
  var third = parseInt(document.getElementById("id_market_interaction_choice_3").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}}