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

{% 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; --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: 36px 30px; margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--primary-light); }
    .checkmark { font-size: 56px; text-align: center; margin-bottom: 20px; }
    h2 { color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
     padding-bottom: 8px; margin-top: 0; margin-bottom: 14px;
     font-size: 17px; text-align: left; }
    h3 { color: var(--primary-dark); font-size: 20px; text-align: center;
         margin: 0 0 16px 0; }
    p  { font-size: 14px; line-height: 1.8; margin-bottom: 12px; text-align: center; }
    .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
                    margin: 24px 0; }
    .summary-item { background: var(--neutral-lightest); border-radius: 6px;
                    padding: 14px 16px; border-left: 4px solid var(--primary-light);
                    font-size: 14px; }
    .summary-item strong { color: var(--primary-dark); display: block;
                           margin-bottom: 4px; font-size: 13px; }
    .remind-box { background: #fff8e1; border-left: 4px solid #f39c12;
                  padding: 14px 18px; border-radius: 4px; margin: 20px 0;
                  font-size: 14px; text-align: left; }
    .button-section { text-align: center; margin-top: 28px; }
    .otree-btn-next { background-color: var(--primary-medium) !important; border: none !important;
                      color: white !important; padding: 14px 48px !important; border-radius: 6px !important;
                      font-size: 17px !important; font-weight: 700 !important; cursor: pointer !important;
                      transition: all 0.3s ease !important;
                      box-shadow: 0 4px 10px rgba(0,95,155,0.25) !important; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important;
                            transform: translateY(-2px) !important; }
    @media (max-width: 540px) { .summary-grid { grid-template-columns: 1fr; } }
</style>

<div class="header">
    <h1>{% if participant.language == 'en' %}Instructions Complete{% else %}Instruktionen abgeschlossen{% endif %}</h1>
</div>

<div class="card">
    <div class="checkmark">✅</div>

    <h3>{% if participant.language == 'en' %}You are ready to begin!{% else %}Sie können jetzt beginnen!{% endif %}</h3>

    {% if participant.language == 'en' %}
        <p>You have successfully read and understood all instructions. The experiment will now begin.</p>

        <div class="summary-grid">
            <div class="summary-item">
                <strong>Phase 1</strong>
                Investment decision — form a group connection with your partner.
            </div>
            <div class="summary-item">
                <strong>Phase 2</strong>
                Encoding task — {{ C.PHASE2_MIN }} minutes, {{ C.POINTS_PER_BLOCK }} points per correct block.
            </div>
            <div class="summary-item">
                <strong>Phase 3</strong>
                Random loss of connection and Decision on the next steps.
            </div>
            <div class="summary-item">
                <strong>Phase 4</strong>
                Encoding task — {{ C.PHASE4_MIN }} minutes with your chosen option.
            </div>
        </div>

        <div class="remind-box">
            <strong>🔔 Reminder:</strong> All decisions are anonymous. Your earnings depend on your
            own decisions and those of your partner.
        </div>

        <p>Click <strong>Start Experiment</strong> when you are ready.</p>

    {% else %}
        <p>Sie haben alle Instruktionen erfolgreich gelesen und verstanden. Das Experiment beginnt jetzt.</p>

        <div class="summary-grid">
            <div class="summary-item">
                <strong>Phase 1</strong>
                Investitionsentscheidung — Gruppenverbindung mit Ihrem*Ihrer Partner*in aufbauen.
            </div>
            <div class="summary-item">
                <strong>Phase 2</strong>
                Kodieraufgabe — {{ C.PHASE2_MIN }} Minuten, {{ C.POINTS_PER_BLOCK }} Punkte pro korrektem Block.
            </div>
            <div class="summary-item">
                <strong>Phase 3</strong>
                Zufällige Zerstörung der Verbindung und Entscheidung über weiteren Verlauf.
            </div>
            <div class="summary-item">
                <strong>Phase 4</strong>
                Kodieraufgabe — {{ C.PHASE4_MIN }} Minuten mit der gewählten Option.
            </div>
        </div>

        <div class="remind-box">
            <strong>🔔 Hinweis:</strong> Alle Entscheidungen sind anonym. Ihre Verdienste hängen
            von Ihren eigenen Entscheidungen und denen Ihres*Ihrer Partners*in ab.
        </div>

        <p>Klicken Sie auf <strong>Experiment starten</strong>, wenn Sie bereit sind.</p>
    {% endif %}
</div>

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