{{ block title }}
    Energiesicherheit
{{ endblock %}

{% block content %}
<style>
    /* 1. Force both tables to have identical layouts */
    .aligned-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;
    }

    /* 2. Center radio buttons and hide default labels */
    .aligned-table td {
        vertical-align: middle;
        text-align: center;
        overflow: hidden; /* Prevents text from breaking layout */
    }

    .aligned-table td label { display: none; }

    /* 3. Left-align the first column (the strategy names) */
    .strategy-label {
        text-align: left !important;
        padding-left: 10px;
    }


</style>

<p>
Bitte bewerten Sie die Erfolgsaussichten und Zusatzkosten der zuvor vorgestellten Strategien.
Wir sind an Ihrer persönlichen Einschätzung interessiert, es gibt also keine richtige oder falsche Antwort.
<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 Tabellen.)
</span>
</p>

<p>
    Wie erfolgreich reduziert die Strategie das Risiko, dass die Folgen eines Schocks in Deutschland zu spüren sind?
</p>
<table class="table table-bordered aligned-table">
    <thead>
        <tr>
            <th>Strategie</th>
            <th>Nicht <br>erfolgreich</th>
            <th>Wenig <br>erfolgreich</th>
            <th>Erfolgreich</th>
            <th>Sehr <br>erfolgreich</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="strategy-label">
                <strong>Reshoring</strong>
                <span class="info-icon" data-desc="{{ descriptions.reshoring }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.risk_belief_reshoring %} <td>{{ choice }}</td> {% endfor %}
        </tr>
        <tr>
            <td class="strategy-label">
                <strong>Friendshoring</strong>
                <span class="info-icon" data-desc="{{ descriptions.friendshoring }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.risk_belief_friendshoring %} <td>{{ choice }}</td> {% endfor %}
        </tr>
        <tr>
            <td class="strategy-label">
                <strong>Diversifikation</strong>
                <span class="info-icon" data-desc="{{ descriptions.diversification }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.risk_belief_diversification %} <td>{{ choice }}</td> {% endfor %}
        </tr>
    </tbody>
</table>


<p>
Welche Zusatzkosten bedeutet die Strategie für das deutsche Energiesystem?
</p>

<table class="table table-bordered aligned-table">
    <thead>
        <tr>
            <th>Strategie</th>
            <th>Hohe <br>Zusatzkosten</th>
            <th>Moderate <br>Zusatzkosten</th>
            <th>Geringe <br>Zusatzkosten</th>
            <th>Keine <br>Zusatzkosten</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="strategy-label">
                <strong>Reshoring</strong>
                <span class="info-icon" data-desc="{{ descriptions.reshoring }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.cost_belief_reshoring %} <td>{{ choice }}</td> {% endfor %}
        </tr>
        <tr>
            <td class="strategy-label">
                <strong>Friendshoring</strong>
                <span class="info-icon" data-desc="{{ descriptions.friendshoring }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.cost_belief_friendshoring %} <td>{{ choice }}</td> {% endfor %}
        </tr>
        <tr>
            <td class="strategy-label">
                <strong>Diversifikation</strong>
                <span class="info-icon" data-desc="{{ descriptions.diversification }}" style="cursor:pointer; color:#007BFF;">&#9432;</span>
            </td>
            {% for choice in form.cost_belief_diversification %} <td>{{ choice }}</td> {% endfor %}
        </tr>
    </tbody>
</table>

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

<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: 270px;">
    <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 %}