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

    <p>
        Deutschland wird seinen zukünftigen Wasserstoffbedarf nicht durch heimische Produktion decken können und ist auf Importe angewiesen.
        Diese können aus verschiedenen Ländern kommen, die sich in mehreren Eigenschaften unterscheiden können.
        Einige dieser Eigenschaften sind in der untenstehenden Tabelle aufgeführt.
        Bitte lesen Sie sich zunächst die Tabelle aufmerksam durch.
    </p>
<table class="table table-bordered">
    <colgroup>
        <col style="width: 12%;">   <!-- Attribute column -->
        <col style="width: 71%;"> <!-- Land A column -->
        <col style="width: 17%;"> <!-- Land B column -->
    </colgroup>
    <thead>
        <tr>
            <th>Eigenschaft </th>
            <th>Beschreibung </th>
            <th>Mögliche Werte </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Kosten</b> </td>
            <td>In Zeiten von wenig Sonne/ Wind wird der Wasserstoff zur Stromversorgung in Deutschland genutzt.
                <b>Je höher die Importkosten des Wasserstoffes, desto höher sind die Stromkosten in Deutschland</b>.</td>
            <td>keine Erhöhung, <br> 5% Erhöhung, <br> 10% Erhöhung, <br> 15% Erhöhung </td>
        </tr>
        <tr>
            <td><b>Stabilität</b> </td>
            <td>Die ökonomische und politische Stabilität reflektiert die Rahmenbedingungen des Partnerlandes.
                <b>Eine höhere Stabilität bedeutet unter anderem eine höhere Zuverlässigkeit</b> der Lieferanten und ein geringeres Ausfallrisiko.</td>
            <td>hohe Stabilität, <br> mittlere Stabilität, <br> niedrige Stabilität </td>
        </tr>
        <tr>
            <td><b>Sicherheit</b> </td>
            <td>Die Sicherheit reflektiert gewalttätige/ militärische Konflikte im Partnerland selbst oder in dessen Umgebung.
                <b>Eine höhere Sicherheit bedeutet unter anderem eine höhere Zuverlässigkeit</b> der Lieferanten und ein geringeres Ausfallrisiko.</td>
            <td>hohe Sicherheit, <br> mittlere Sicherheit, <br> niedrige Sicherheit </td>
        </tr>
        <tr>
            <td><b>Umwelt-
                <br>standards</b> </td>
            <td>Der Umweltstandard des Partnerlandes umfasst Maßnahmen zur <b>Bekämpfung des Klimawandels</b> sowie zum <b>Schutz von Ökosystemen und Biodiversität</b>. </td>
            <td>hohe Standards, <br> mittlere Standards, <br> niedrige Standards </td>
        </tr>
        <tr>
            <td><b>Freiheit</b> </td>
            <td>Die Freiheit des Partnerlandes umfasst <b>politische und zivile Freiheiten</b>, wie z. B. ein demokratisches Wahlrecht und Meinungsfreiheit.  </td>
            <td>frei, <br> teilweise frei, <br> nicht frei </td>
        </tr>
        <tr>
            <td><b>Aktive
                <br>Handels-
                <br>beziehung</b> </td>
            <td>Es existiert bereits eine <b>aktive Handelsbeziehung im Energiesektor zwischen Deutschland und dem Partnerland</b>.  </td>
            <td>aktiver Handel, <br> kein Handel</td>
        </tr>
    </tbody>
</table>

<!-- Countdown Text -->
<p id="countdown-message" style="font-weight">Bitte lesen Sie den Text sorgfältig. Sie können in <span id="countdown">20</span> Sekunden fortfahren.</p>

<!-- Next Button (Initially disabled) -->
<button id="next-button" class="otree-btn-next btn btn-primary" disabled style="display: none;">Weiter</button>

<script>
    let remaining = 20;

    const countdownEl = document.getElementById("countdown");
    const nextButton = document.getElementById("next-button");
    const countdownMessage = document.getElementById("countdown-message");

    const countdownInterval = setInterval(() => {
        remaining--;
        countdownEl.textContent = remaining;

        if (remaining <= 0) {
            clearInterval(countdownInterval);
            countdownMessage.style.display = "none";
            nextButton.disabled = false;
            nextButton.style.display = "inline-block";
        }
    }, 1000);
</script>
{% endblock %}