{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    {% if participant.language == 'en' %}FUNO - Part 2{% else %}FUNO - 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 25px; border-radius: 8px;
        margin-bottom: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .header h1 { margin: 0; font-size: 22px; font-weight: 600; }
    .card {
        background: white; border-radius: 8px; padding: 28px 30px; margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--primary-light);
    }
    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 16px; font-size: 17px;
    }
    p { font-size: 14px; line-height: 1.8; margin-bottom: 10px; }

    .otree-form .controls { display: none !important; }

    .choice-grid { display: flex; gap: 20px; margin: 24px 0; flex-wrap: wrap; }
    .choice-label { flex: 1; min-width: 220px; cursor: pointer; }
    .choice-label input[type="radio"] { display: none; }
    .choice-card {
        display: block; border: 3px solid var(--primary-lighter);
        border-radius: 10px; padding: 22px 24px; background: white;
        transition: border-color 0.2s, box-shadow 0.2s;
        height: 100%; box-sizing: border-box;
    }
    .choice-label input[type="radio"]:checked + .choice-card {
        border-color: var(--primary-dark);
        box-shadow: 0 0 0 3px rgba(21, 50, 104, 0.15);
        background: #f0f5ff;
    }
    .choice-card:hover { border-color: var(--primary-medium); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .choice-title { font-weight: 700; color: var(--primary-dark); font-size: 15px; margin-bottom: 10px; display: block; }
    .choice-detail { font-size: 14px; color: var(--neutral-dark); line-height: 1.7; }
    .choice-payoff {
        margin-top: 14px; padding: 10px 12px; border-radius: 6px;
        background: var(--neutral-lightest); font-size: 13px;
    }
    .choice-payoff strong { color: var(--primary-dark); }

    .button-section { text-align: center; margin-top: 28px; }
    .otree-btn-next {
        background-color: var(--primary-medium) !important; border: none !important;
        color: white !important; padding: 12px 36px !important; border-radius: 6px !important;
        font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important;
    }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</style>

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

<div class="card">
    <h2>
        {% if participant.language == 'en' %}Investment Decision{% else %}Investitionsentscheidung{% endif %}
    </h2>

    <p>
        {% if participant.language == 'en' %}
            You have <strong>{{ endowment }} points</strong>. Please choose one of the two options.
        {% else %}
            Sie haben <strong>{{ endowment }} Punkte</strong>. Bitte wählen Sie eine der beiden Optionen.
        {% endif %}
    </p>

    <div class="choice-grid">
        <!-- Invest -->
        <label class="choice-label">
            <input type="radio" name="invest" value="invest">
            <span class="choice-card">
                <span class="choice-title">
                    {% if participant.language == 'en' %}Group connection{% else %}Gruppenverbindung{% endif %}
                </span>
                <span class="choice-detail">
                    {% if participant.language == 'en' %}
                        Invest all {{ endowment }} points. A connection forms only if your partner
                        also invests. Invested points are not returned.
                    {% else %}
                        Alle {{ endowment }} Punkte investieren. Eine Verbindung kommt nur zustande,
                        wenn Ihr*e Partner*in ebenfalls investiert. Investierte Punkte werden nicht
                        zurückerstattet.
                    {% endif %}
                </span>
                <div class="choice-payoff">
                    {% if participant.language == 'en' %}
                        <strong>Immediate payoff: 0 points</strong>
                    {% else %}
                        <strong>Sofortige Auszahlung: 0 Punkte</strong>
                    {% endif %}
                </div>
            </span>
        </label>

        <!-- Private account -->
        <label class="choice-label">
            <input type="radio" name="invest" value="private_account">
            <span class="choice-card">
                <span class="choice-title">
                    {% if participant.language == 'en' %}Private account{% else %}Privates Konto{% endif %}
                </span>
                <span class="choice-detail">
                    {% if participant.language == 'en' %}
                        Keep all {{ endowment }} points, multiplied by 1.8.
                        No connection is formed.
                    {% else %}
                        Alle {{ endowment }} Punkte behalten, multipliziert mit 1,8.
                        Es wird keine Verbindung gebildet.
                    {% endif %}
                </span>
                <div class="choice-payoff">
                    {% if participant.language == 'en' %}
                        <strong>Immediate payoff: {{ private_return }} points</strong>
                        ({{ endowment }} × 1.8, guaranteed)
                    {% else %}
                        <strong>Sofortige Auszahlung: {{ private_return }} Punkte</strong>
                        ({{ endowment }} × 1,8, garantiert)
                    {% endif %}
                </div>
            </span>
        </label>
    </div>
</div>

<script>
    const customRadios = document.querySelectorAll('.choice-label input[type="radio"]');
    const otreeRadios  = document.querySelectorAll('.otree-form input[type="radio"]');
    customRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            otreeRadios.forEach(function(r) {
                if (r.value === radio.value) { r.checked = true; }
            });
        });
    });
</script>

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