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

{% block title %}
    {% if participant.language == 'en' %}FUNI - Part 2{% else %}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 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: 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; }
    .info-box { background-color: var(--neutral-lightest); border-left: 4px solid var(--primary-lighter);
                padding: 13px 16px; border-radius: 4px; margin-bottom: 24px; font-size: 14px; }
    .option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
    .option-card { border: 2px solid #dde; border-radius: 8px; padding: 22px;
                   cursor: pointer; transition: all 0.2s ease; }
    .option-card:hover { border-color: var(--primary-lighter); background: #eaf4fb; }
    .option-card.selected { border-color: var(--primary-medium); background: #eaf4fb; }
    .option-title { font-size: 17px; font-weight: 700; color: var(--primary-dark);
                    margin-bottom: 12px; padding-bottom: 8px;
                    border-bottom: 2px solid var(--primary-light); }
    .option-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px;
                  color: #444; line-height: 1.5; }
    .option-row .label { font-weight: 600; color: var(--primary-dark);
                         min-width: 100px; flex-shrink: 0; }
    .help-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid #dde;
                 font-size: 12px; color: #666; font-style: italic; }
    .hidden-field { display: none; }
    .validation-msg { color: #c0392b; font-size: 13px; text-align: center;
                      margin-top: 8px; display: none; }
    .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 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; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
    @media (max-width: 600px) { .option-grid { grid-template-columns: 1fr; } }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Choose Your Task for the Remaining 13 Minutes{% else %}Wählen Sie Ihre Aufgabe für die verbleibenden 13 Minuten{% endif %}</h2>

    <div class="info-box">
        {% if participant.language == 'en' %}
            Please read both options carefully before deciding. Your choice determines how you
            will continue the encoding task. Both options pay <strong>10 points</strong> per
            correctly completed block during the paid period.
        {% else %}
            Sie haben nun die Möglichkeit zu wählen, ob Sie für die verbleibenden {{ C.PHASE4_MIN }} Minuten Option A oder
            Option B wählen möchten. Zur Erinnerung sind die Unterschiede unten nochmal aufgeführt. Beide Optionen
            zahlen <strong>10 Punkte</strong> pro korrekt abgeschlossenem Block während der bezahlten Phase und dauern
            insgesamt {{ C.PHASE4_MIN }} Minuten.
        {% endif %}
    </div>

    <div class="hidden-field">{% formfields %}</div>

    <div class="option-grid">

        <!-- Option A -->
        <div class="option-card" id="card-A" onclick="selectOption('A')">
            <div class="option-title">
                {% if participant.language == 'en' %}Option A – Continue with Original Table{% else %}Option A – Ursprüngliche Tabelle{% endif %}
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Coding table:{% else %}Kodiertabelle:{% endif %}</span>
                <span>{% if participant.language == 'en' %}Same as Phase 2{% else %}Dieselbe wie in Phase 2{% endif %}</span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Block length:{% else %}Blocklänge:{% endif %}</span>
                <span>{% if participant.language == 'en' %}<strong>6 letters</strong>{% else %}<strong>6 Buchstaben</strong>{% endif %}</span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Duration:{% else %}Struktur:{% endif %}</span>
                <span>{% if participant.language == 'en' %}The same task throughout, fully paid{% else %}Durchgehend dieselbe Aufgabe, vollständig bezahlt{% endif %}</span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Training:{% else %}Training:{% endif %}</span>
                <span>{% if participant.language == 'en' %}None required{% else %}Keines erforderlich{% endif %}</span>
            </div>
            <div class="help-note">
                {% if participant.language == 'en' %}
                    If help is received: block length is temporarily reduced by 1 letter
                    for 30 seconds per 15 points of help received.
                {% else %}
                    Bei erhaltener Hilfe: Blocklänge wird vorübergehend um 1 Buchstaben reduziert
                    – für 30 Sekunden pro 15 erhaltene Hilfepunkte.
                {% endif %}
            </div>
        </div>

        <!-- Option B -->
        <div class="option-card" id="card-B" onclick="selectOption('B')">
            <div class="option-title">
                {% if participant.language == 'en' %}Option B – Switch to New Table{% else %}Option B – Wechsel zu neuer Tabelle{% endif %}
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Coding table:{% else %}Kodiertabelle:{% endif %}</span>
                <span>{% if participant.language == 'en' %}New table{% else %}Neue Tabelle{% endif %}</span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Block length:{% else %}Blocklänge:{% endif %}</span>
                <span>{% if participant.language == 'en' %}<strong>3 letters</strong> (baseline, as in Phase 2){% else %}<strong>3 Buchstaben</strong> (wie in Phase 2){% endif %}</span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Structure:{% else %}Struktur:{% endif %}</span>
                <span>
                    {% if participant.language == 'en' %}
                        Unpaid training period → paid encoding period
                    {% else %}
                        Unbezahlte Trainingsphase → bezahlte Kodierphase
                    {% endif %}
                </span>
            </div>
            <div class="option-row">
                <span class="label">{% if participant.language == 'en' %}Training:{% else %}Training:{% endif %}</span>
                <span>
                    {% if participant.language == 'en' %}
                        <strong>Required</strong>, at least {{ C.PRACTICE_MIN }} minutes and at least 20 blocks mined
                    {% else %}
                        <strong>Erforderlich</strong>, mind. {{ C.PRACTICE_MIN }} Minuten und mind. 20 Blöcke codiert
                    {% endif %}
                </span>
            </div>
            <div class="help-note">
                {% if participant.language == 'en' %}
                    If help is received: training period is shortened by 30 seconds
                    per 15 points of help received.
                {% else %}
                    Bei erhaltener Hilfe: Trainingsphase wird um 30 Sekunden pro
                    15 erhaltene Hilfepunkte verkürzt.
                {% endif %}
            </div>
        </div>

    </div>

    <div class="validation-msg" id="val-msg">
        {% if participant.language == 'en' %}Please select an option before continuing.
        {% else %}Bitte wählen Sie eine Option, bevor Sie fortfahren.{% endif %}
    </div>
</div>

<div class="button-section" id="buttonSection">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>
<script>
    function selectOption(value) {
        document.querySelectorAll('input[type="radio"]').forEach(function(r) {
            r.checked = (r.value === value);
        });
        document.getElementById('card-A').className = 'option-card' + (value === 'A' ? ' selected' : '');
        document.getElementById('card-B').className = 'option-card' + (value === 'B' ? ' selected' : '');
        document.getElementById('val-msg').style.display = 'none';
    }

    document.addEventListener('DOMContentLoaded', function() {
        const checked = document.querySelector('input[type="radio"]:checked');
        if (checked) selectOption(checked.value);
    });

    document.querySelector('form').addEventListener('submit', function(e) {
        if (!document.querySelector('input[type="radio"]:checked')) {
            e.preventDefault();
            document.getElementById('val-msg').style.display = 'block';
        }
    });
</script>
{% endblock %}