{{ block title }}
    Handelspartner
{{ endblock %}

{% block content %}
<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Land A</th>
            <th>Land B</th>
        </tr>
    </thead>
    <tbody>
    {% for label, value_A, value_B, desc in attributes %}
        <tr>
            <td>
                <strong>{{ label }}</strong>
                <span class="info-icon"
                      data-desc="{{ desc|escape }}"
                      style="cursor: pointer; color: #007BFF;">&#9432;</span>
            </td>
            <td>{{ value_A }}</td>
            <td>{{ value_B }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

{{ formfield "choice" }}

<p>Wie bewerten Sie die beiden Länder als Handelspartner für grünen Wasserstoff?</p>
<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th>sehr schlecht</th>
            <th>schlecht</th>
            <th>eher schlecht</th>
            <th>weder schlecht noch gut</th>
            <th>eher gut</th>
            <th>gut</th>
            <th>sehr gut</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Land A</strong></td>
            {% for choice in form.rating_A %}
                <td align="center">{{ choice }}</td>
            {% endfor %}
        </tr>
        <tr>
            <td><strong>Land B</strong></td>
            {% for choice in form.rating_B %}
                <td align="center">{{ choice }}</td>
            {% endfor %}
        </tr>
    </tbody>
</table>

<button class="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 %}