{{ block title }}
    Handelspartner
{{ endblock }}
{{ block content }}
<p>
    Nun möchten wir Sie noch bitten, für die folgenden Länder die zuvor beschriebenen Eigenschaften zu schätzen.
    Bitte schätzen Sie die Eigenschaften basierend auf Ihrem allgemeinen Wissen des jeweiligen Landes ohne vorherige Recherche.
    <span style='font-size: 0.85rem; color: #6c757d; display: block; margin-top: 0px;'>
        (Falls Sie mit Ihrem Handy an der Umfrage teilnehmen, wechseln Sie bitte ins Querformat für eine korrekte Darstellung der Tabelle.)
    </span>
</p>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Attribut</th>
            <th>Saudi-Arabien</th>
            <th>China</th>
            <th>Chile</th>
   </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Stabilität</b> <span class="info-icon"
                      data-desc="Die ökonomische und geopolitische Stabilität reflektiert die Rahmenbedingungen des Partnerlandes.
                                Eine höhere Stabilität bedeutet unter anderem eine höhere Zuverlässigkeit der Lieferanten und ein geringeres Ausfallrisiko."
                      style="cursor: pointer; color: #007BFF;">&#9432;</span></td>
            <td>{{ formfield player.S_Arab_stability }}</td>
            <td>{{ formfield player.China_stability }}</td>
            <td>{{ formfield player.Chile_stability }}</td>
</tr>
        <tr>
            <td><b>Umweltstandards</b> <span class="info-icon"
                      data-desc="Der Umweltstandard des Partnerlandes umfasst Maßnahmen zur Bekämpfung des Klimawandels sowie zum Schutz von Ökosystemen und Biodiversität. "
                      style="cursor: pointer; color: #007BFF;">&#9432;</span></td>
            <td>{{ formfield player.S_Arab_environment }}</td>
            <td>{{ formfield player.China_environment }}</td>
            <td>{{ formfield player.Chile_environment }}</td>
</tr>
        <tr>
            <td><b>Freiheit</b> <span class="info-icon"
                      data-desc="Die Freiheit des Partnerlandes umfasst politische und zivile Freiheiten, wie z. B. ein demokratisches Wahlrecht und Meinungsfreiheit. "
                      style="cursor: pointer; color: #007BFF;">&#9432;</span></td>
            <td>{{ formfield player.S_Arab_freedom }}</td>
            <td>{{ formfield player.China_freedom }}</td>
            <td>{{ formfield player.Chile_freedom }}</td>
</tr>
        <tr>
            <td><b>Handelsbeziehungen</b> <span class="info-icon"
                      data-desc="In der Vergangenheit existierte bereits eine starke und stabile Handelsbeziehung im Energiesektor zwischen Deutschland und dem Partnerland."
                      style="cursor: pointer; color: #007BFF;">&#9432;</span></td>
            <td>{{ formfield player.S_Arab_trade }}</td>
            <td>{{ formfield player.China_trade }}</td>
            <td>{{ formfield player.Chile_trade }}</td>
</tr>
    </tbody>
</table>

    <button class="otree-btn-next btn btn-primary">Weiter</button>

<!-- Modal -->
<div id="infoModal" class="modal"
     style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%);
            background:white; padding:20px; border:1px solid #ccc; z-index:999;
            max-width:400px; box-shadow:0 5px 15px rgba(0,0,0,0.3); max-height: 250px;">
    <span id="closeModal" style="cursor:pointer; float:right; font-size:20px;">&times;</span>
    <div id="modalContent" style="margin-top:10px;"></div>
</div>

<script>
const modal = document.getElementById("infoModal");
const modalContentDiv = document.getElementById("modalContent");
const closeModalBtn = document.getElementById("closeModal");

document.querySelectorAll(".info-icon").forEach(icon => {
    icon.addEventListener("click", function(event) {
        event.stopPropagation(); // avoid outside-click closing immediately
        modalContentDiv.textContent = this.getAttribute("data-desc");
        modal.style.display = "block";
    });
});

closeModalBtn.addEventListener("click", function() {
    modal.style.display = "none";
});

// Close when clicking outside modal
window.addEventListener("click", function(event) {
    if (modal.style.display === "block" && !modal.contains(event.target) && !event.target.classList.contains("info-icon")) {
        modal.style.display = "none";
    }
});
</script>

{{ endblock }}