{% 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 0 4px 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: 14px; font-size: 17px;
    }

    /* Hide oTree's built-in yellow countdown bar */
    .otree-timer { display: none !important; }

    .timer-box {
        display: flex; align-items: center; justify-content: center;
        gap: 12px; background: var(--primary-dark); color: white;
        border-radius: 8px; padding: 14px 20px; margin-bottom: 24px;
    }
    .timer-digits {
        font-size: 32px; font-weight: 700;
        font-variant-numeric: tabular-nums; letter-spacing: 2px;
    }
    .timer-box.warning { background: #c0392b; }

    .chat-wrapper {
        border: 2px solid var(--primary-lighter);
        border-radius: 8px; overflow: hidden;
        margin-bottom: 24px;
    }

    .button-section { text-align: center; margin-top: 16px; }
    .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);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }
</style>

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

<div class="card">

    <h2>{% if participant.language == 'en' %}Chat{% else %}Chat{% endif %}</h2>

    <p style="font-size: 14px; color: #555; margin-bottom: 20px;">
        {% if participant.language == 'en' %}
            You have up to 5 minutes to freely discuss the game with your partner.
            The discussion is open—however, please be careful not to disclose any personal information (e.g., names)
            and to use respectful language. Violations may result in exclusion from future experiments.
        {% else %}
            Sie haben bis zu 5 Minuten Zeit, das Spiel mit Ihrem*Ihrer Mitspieler*in frei zu besprechen.
            Der Austausch ist offen — bitte achten Sie jedoch darauf, keine persönlichen Informationen (z.B. Name)
            preiszugeben und auf respektvolle Sprache zu achten. Verstöße können zum Ausschluss
            von zukünftigen Experimenten führen.
        {% endif %}
    </p>

    <div class="timer-box" id="timerBox">
        <span>⏳</span>
        <span class="timer-digits" id="timerDisplay">05:00</span>
        <span>{% if participant.language == 'en' %}remaining{% else %}verbleibend{% endif %}</span>
    </div>

    <div class="chat-wrapper">
        {% chat nickname=nickname %}
    </div>

</div>

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

<script>
    const totalSeconds = {{ chat_duration }};
    let remaining = totalSeconds;
    const display  = document.getElementById('timerDisplay');
    const timerBox = document.getElementById('timerBox');

    function formatTime(s) {
        const m   = Math.floor(s / 60);
        const sec = s % 60;
        return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
    }

    display.textContent = formatTime(remaining);

    const interval = setInterval(function() {
        remaining -= 1;
        display.textContent = formatTime(Math.max(remaining, 0));
        if (remaining <= 60) timerBox.classList.add('warning');
        if (remaining <= 0)  clearInterval(interval);
    }, 1000);
</script>

{% endblock %}