{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Part 2
    {% elif participant.language == 'de' %}
        FUNI - 2. Teil
    {% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268;
        --primary-medium: #005f9b;
        --primary-light: #0091c8;
        --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a;
        --neutral-lightest: #ececed;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--neutral-lightest);
        color: var(--neutral-dark);
        line-height: 1.6;
    }

    .header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
    }

    .card {
        background: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        border-left: 4px solid var(--primary-light);
    }

    .info-box {
        background-color: var(--neutral-lightest);
        border-left: 4px solid var(--primary-lighter);
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }

    .points-display {
        background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 100%);
        color: white;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin: 20px 0;
    }

    .button-section {
        text-align: center;
        margin-top: 40px;
    }

    .otree-btn-next {
        background-color: var(--primary-medium) !important;
        border: none !important;
        color: white !important;
        padding: 12px 30px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin-top: 20px !important;
    }

    .otree-btn-next:hover {
        background-color: var(--primary-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    strong {
        color: var(--primary-dark);
    }

    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 14px; font-size: 17px;
    }

    h3 {
        color: var(--primary-medium);
        margin-top: 20px;
    }

    .form-group {
        margin: 30px 0;
    }

    .form-group label {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: var(--primary-dark);
        margin-bottom: 15px;
    }

    .form-group input[type="number"] {
        width: 100%;
        max-width: 200px;
        padding: 12px;
        font-size: 18px;
        border: 2px solid var(--primary-light);
        border-radius: 6px;
        box-sizing: border-box;
    }

    .form-group input[type="number"]:focus {
        outline: none;
        border-color: var(--primary-medium);
        box-shadow: 0 0 0 3px rgba(0, 95, 155, 0.1);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        table-layout: fixed;
    }

    table th:nth-child(1),
    table td:nth-child(1) {
        width: 45%;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
        width: 55%;
    }

    th {
        background-color: var(--primary-medium);
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 500;
    }

    td {
        padding: 12px;
        border-bottom: 1px solid #d9dada;
    }

    tr:hover {
        background-color: var(--neutral-lightest);
    }
</style>

<div class="header">
    <h1>
        Phase 1
    </h1>
</div>

<div class="card">
    <h2>
        {% if participant.language == 'en' %}
            Investment in Group Membership
        {% elif participant.language == 'de' %}
            Investition in Gruppenzugehörigkeit
        {% endif %}
    </h2>

    <div class="points-display">
        {% if participant.language == 'en' %}
            You have {{ endowment }} points available.
        {% elif participant.language == 'de' %}
            Sie haben {{ endowment }} Punkte zur Verfügung.
        {% endif %}
    </div>

    <p style="font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: -10px;">
        {% if participant.language == 'en' %}Reminder: Thresholds{% else %}Erinnerung: Schwellenwerte{% endif %}
    </p>

    <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px;">
        <tr>
            <th style="text-align: left; padding: 8px 12px; background: none; color: var(--neutral-dark); font-weight: 700; border-bottom: 2px solid var(--neutral-dark);">
                {% if participant.language == 'en' %}Total Contribution (You + Partner){% else %}Gesamtbeitrag (Sie + Mitspieler*in){% endif %}
            </th>
            <th style="text-align: left; padding: 8px 12px; background: none; color: var(--neutral-dark); font-weight: 700; border-bottom: 2px solid var(--neutral-dark);">
                {% if participant.language == 'en' %}Group Connection{% else %}Gruppenverbindung{% endif %}
            </th>
        </tr>
        <tr>
            <td style="padding: 8px 12px; border-bottom: 1px solid var(--neutral-lightest);">
                {% if participant.language == 'en' %}Less than {{ threshold }} points{% else %}Weniger als {{ threshold }} Punkte{% endif %}
            </td>
            <td style="padding: 8px 12px; border-bottom: 1px solid var(--neutral-lightest);">
                {% if participant.language == 'en' %}No connection{% else %}Keine Verbindung{% endif %}
            </td>
        </tr>
        <tr>
            <td style="padding: 8px 12px;">
                {% if participant.language == 'en' %}{{ threshold }} points or more{% else %}{{ threshold }} Punkte oder mehr{% endif %}
            </td>
            <td style="padding: 8px 12px;">
                {% if participant.language == 'en' %}Connection established{% else %}Verbindung hergestellt{% endif %}
            </td>
        </tr>
    </table>

    <div class="info-box">
        {% if participant.language == 'en' %}
            <strong>Reminder:</strong> All points you do not invest will be doubled.
            <p style="margin: 10px 0 0 0;">Formula: <strong>Your payoff = ({{ endowment }} points - Your contribution) × {{ multiplier }}</strong></p>
        {% elif participant.language == 'de' %}
            <strong>Zur Erinnerung:</strong> Alle Punkte, die Sie nicht investieren, werden verdoppelt.
            <p style="margin: 10px 0 0 0;">Formel: <strong>Ihr Gewinn = ({{ endowment }} Punkte - Ihr Beitrag) × {{ multiplier }}</strong></p>
        {% endif %}
    </div>

    <div class="form-group">
        <label for="id_contribution" style="font-weight: 500; color: var(--neutral-dark);">
            {% if participant.language == 'en' %}
                How many points would you like to invest in the group membership?
            {% elif participant.language == 'de' %}
                Wie viele Punkte möchten Sie in die Gruppenzugehörigkeit investieren?
            {% endif %}
        </label>
        <div style="display: flex; align-items: center; gap: 10px;">
            <input
                type="number"
                name="contribution"
                id="id_contribution"
                min="0"
                max="{{ endowment }}"
                required
                style="width: 150px; padding: 12px; font-size: 18px; border: 2px solid var(--primary-light); border-radius: 6px;"
            >
            <span style="font-size: 18px; color: var(--neutral-dark);">
                {% if participant.language == 'en' %}
                    points
                {% elif participant.language == 'de' %}
                    Punkte
                {% endif %}
            </span>
        </div>
        {% if form.contribution.errors %}
            <div style="color: #dc3545; margin-top: 10px; font-size: 14px;">
                {% form.contribution.errors %}
            </div>
        {% endif %}
    </div>
</div>


    <script>
        const endowment = {{ endowment }};
        const multiplier = {{ multiplier }};
        const language = "{% participant.language %}";
        const pointsText = language === 'en' ? ' points' : ' Punkte';

        const input = document.querySelector('input[name="contribution"]');
        const preview = document.getElementById('calcPreview');
        const contribSpan = document.getElementById('contrib');
        const keptSpan = document.getElementById('kept');
        const doubledSpan = document.getElementById('doubled');
        const payoffSpan = document.getElementById('payoff');

        function updateCalculation() {
            const contribution = parseFloat(input.value) || 0;
            const kept = endowment - contribution;
            const payoff = kept * multiplier;

            contribSpan.textContent = contribution.toFixed(0) + pointsText;
            keptSpan.textContent = kept.toFixed(0) + pointsText;
            doubledSpan.textContent = kept.toFixed(0) + ' × ' + multiplier;
            payoffSpan.textContent = payoff.toFixed(0) + pointsText;

            if (input.value !== '') {
                preview.classList.add('active');
            } else {
                preview.classList.remove('active');
            }
        }

        input.addEventListener('input', updateCalculation);
        input.addEventListener('change', updateCalculation);

        // Initialize on page load
        if (input.value) {
            updateCalculation();
        }
    </script>

</div>

<div class="button-section">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>

{% endblock %}