{{ block title }}
    Entscheidung {{ player.round_number }} (von 4)
{{ endblock }}
{{ block content }}

<h5>Die von mir gewählte Alternative ist:</h5>
{{ formfield player.Frage_1 label="" }}
<div style="display:none">
        {{ player.endowment | c }}
        {{ player.endowment2 | c }}
</div>

<div class="card mt-3 mb-3 border-gray">
<h5 class="card-header bg-gray" ><strong>Auszahlungstabelle</strong></h5>
<table>
  <thead>
    <tr class="header-row">
      <th style="width: 33%" class="cell cell-product">Alternative</th>
      <th style="width: 33%">Auszahlung Person 1</th>
      <th style="width: 33%">Auszahlung Person 2</th>
    </tr>
  </thead>
  <tbody>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative a</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.0 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.0 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.0 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product1">
      <td class="cell cell-product">a</td>
      <td class="cell">{{ auszahlung.0 | c }}</td>
      <td class="cell">{{ auszahlung2.0 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative b</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.1 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.1 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.1 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product2">
      <td class="cell cell-product">b</td>
      <td class="cell">{{ auszahlung.1 | c }}</td>
      <td class="cell">{{ auszahlung2.1 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative c</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.2 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.2 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.2 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product3">
      <td class="cell cell-product">c</td>
      <td class="cell">{{ auszahlung.2 | c }}</td>
      <td class="cell">{{ auszahlung2.2 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative d</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.3 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.3 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.3 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product4">
      <td class="cell cell-product">d</td>
      <td class="cell">{{ auszahlung.3 | c }}</td>
      <td class="cell">{{ auszahlung2.3 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative e</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.4 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.4 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.4 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product5">
      <td class="cell cell-product">e</td>
      <td class="cell">{{ auszahlung.4 | c }}</td>
      <td class="cell">{{ auszahlung2.4 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative f</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.5 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.5 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.5 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product6">
      <td class="cell cell-product">f</td>
      <td class="cell">{{ auszahlung.5 | c }}</td>
      <td class="cell">{{ auszahlung2.5 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative g</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.6 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.6 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.6 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product7">
      <td class="cell cell-product">g</td>
      <td class="cell">{{ auszahlung.6 | c }}</td>
      <td class="cell">{{ auszahlung2.6 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative h</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.7 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.7 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.7 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product8">
      <td class="cell cell-product">h</td>
      <td class="cell">{{ auszahlung.7 | c }}</td>
      <td class="cell">{{ auszahlung2.7 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative i</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.8 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.8 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.8 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product9">
      <td class="cell cell-product">i</td>
      <td class="cell">{{ auszahlung.8 | c }}</td>
      <td class="cell">{{ auszahlung2.8 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative j</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.9 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.9 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.9 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product10">
      <td class="cell cell-product">j</td>
      <td class="cell">{{ auszahlung.9 | c }}</td>
      <td class="cell">{{ auszahlung2.9 | c }}</td>
    </tr>
<tr data-info="<meta name='viewport' content='width=device-width, initial-scale=1.0'><style>body { font-family: Calibri, sans-serif; } table { border-collapse: collapse; } th, td { border: 1px solid lightgray; padding: 5px; }</style>
    <table><tr><th style='width: 50%'>Alternative k</th><th style='width: 50%'></th></tr>
    <tr><td>Betrag für Person 1:</td><td>{{ auszahlung.10 | c }}</td></tr>
    <tr><td>Betrag für Person 2:</td><td>{{ auszahlung2.10 | c }}</td></tr>
    <tr><td>Summe beider Beträge:</td><td>{{ auszahlung_total.10 | c }}</td></tr></table>
    <br><button onclick='window.close()' >Zurück</button>" id="product11">
      <td class="cell cell-product">k</td>
      <td class="cell">{{ auszahlung.10 | c }}</td>
      <td class="cell">{{ auszahlung2.10 | c }}</td>
    </tr>
  </tbody>
</table>

</div>

<p>Wenn Sie die einzelnen Zeilen der Tabelle <b>doppelt anklicken</b>, erhalten Sie für jede angebotene Alternative eine detaillierte Beschreibung.</p>

<details>
<summary><b>Um die Instruktionen erneut zu lesen, klicken Sie <u>hier</u>.</b></summary>
<hr>
<p>Dieser Teil des Experimentes geht über vier Entscheidungen. Ihre Aufgabe ist dabei immer gleich: Sie werden gebeten, die Höhe der Beträge zu bestimmen, die an Person 1 und
    an Person 2 ausbezahlt werden.</p><p>
Zur Auswahl stehen Ihnen 11 Alternativen (a bis k), die in den Zeilen der oberen Tabelle dargestellt werden. </p>
</details>

<br>

    <p>Wenn Sie mit dieser Runde fertig sind, klicken Sie bitte auf „Weiter“.</p><br>

    {{ next_button }}

<style>
    p {
        text-align: justify;
        margin-bottom: 2em;
        hyphens: auto;
    }
    br {
        display: block;
        margin: 1em 0;
    }
    table {
        border-collapse: collapse; /* Cell */
    }
    th, td {
      border: 1px solid lightgray;
      padding: 5px;
    }
    .cell-product {
        padding-left: 10px;
    }
    .highlight {
        background-color: #007bff;
        color: #ffffff;
        font-weight: bold;
    }
</style>

<script>
// Get all rows except the one with the "header-row" class
const rows = document.querySelectorAll('tr:not(.header-row)');

// Add click event listener to each row
for (let i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', function() {
    // Remove highlight class from all rows
    for (let j = 0; j < rows.length; j++) {
      rows[j].classList.remove('highlight');
    }

    // Add highlight class to clicked row
    this.classList.add('highlight');

    // Get product number from clicked row's id
    const productNumber = this.id.replace('product', '');

    // Change the answer
    document.getElementById('id_Frage_1').value = productNumber;
  });

  rows[i].addEventListener('dblclick', function() {
    // Get the information for the clicked row
    const info = this.getAttribute('data-info');

    // Open the information in a new window
    const newWindow = window.open('', '_blank');
    newWindow.document.write(info);
    newWindow.document.close(); // Close the document to tell the browser to finish loading the page
  });
}
</script>

<script> //Herunterscrollen
document.getElementById('id_Frage_1').addEventListener('change', function() {
  // Scroll to the bottom of the page
  window.scrollTo(0, document.body.scrollHeight);
});
</script>

{{ endblock }}