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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% 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;
    }
    .privacy-box {
        background-color: #fff8e1; border-left: 4px solid #f9a825;
        padding: 13px 16px; border-radius: 4px;
        margin-bottom: 24px; font-size: 14px;
    }
    .privacy-box strong { color: #e65100; }
    .section-box {
        background-color: var(--neutral-lightest);
        border-radius: 6px; padding: 20px 22px;
        margin-bottom: 20px;
    }
    .section-instruction {
        font-size: 13px; color: #666; font-style: italic;
        margin: 0 0 16px 0;
    }
    .divider { border: none; border-top: 1px solid var(--neutral-lightest); margin: 22px 0; }
    .confirm-note {
        font-size: 14px; color: var(--neutral-dark); margin-top: 16px;
    }
    .confirm-note strong { color: var(--primary-dark); }
    .button-section { text-align: center; margin-top: 32px; }
    .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>{% if participant.language == 'en' %}Payment Information{% else %}Zahlungsinformationen{% endif %}</h1>
</div>

<div class="card">

    <div class="privacy-box">
        {% if participant.language == 'en' %}
            <strong>🔒 Data protection:</strong> Your banking details are stored securely and
            used solely for the purpose of transferring your earnings. They will not be shared
            with third parties or used for any other purpose.
        {% else %}
            <strong>🔒 Datenschutz:</strong> Ihre Bankdaten werden sicher gespeichert und
            ausschließlich zur Überweisung Ihrer Auszahlung verwendet. Sie werden nicht an
            Dritte weitergegeben oder für andere Zwecke genutzt.
        {% endif %}
    </div>

    <!-- Bank details -->
    <h2>{% if participant.language == 'en' %}Bank Information{% else %}Bankinformationen{% endif %}</h2>

    <div class="section-box">
        <p class="section-instruction">
            {% if participant.language == 'en' %}
                Please enter your IBAN and BIC <strong>without spaces</strong>.
            {% else %}
                Bitte geben Sie Ihre IBAN und Ihre BIC <strong>ohne Leerzeichen</strong> ein.
            {% endif %}
        </p>
        <div class="row">
            <div class="col-sm-12">
                <label class="field-label">{% if participant.language == 'en' %}Name of the account holder{% else %}Name des*der Kontoinhaber*in{% endif %}</label>
                {% formfield player.name %}
            </div>
        </div>
        <div class="row" style="margin-top: 12px;">
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}IBAN{% else %}IBAN{% endif %}</label>
                {% formfield player.iban %}
            </div>
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}BIC{% else %}BIC{% endif %}</label>
                {% formfield player.bic %}
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <!-- Address -->
    <h2>{% if participant.language == 'en' %}Address Information{% else %}Adressinformationen{% endif %}</h2>

    <div class="section-box">
        <div class="row">
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}Street{% else %}Straße{% endif %}</label>
                {% formfield player.street %}
            </div>
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}House number{% else %}Hausnummer{% endif %}</label>
                {% formfield player.house_nr %}
            </div>
        </div>
        <div class="row" style="margin-top: 12px;">
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}Zip Code{% else %}Postleitzahl{% endif %}</label>
                {% formfield player.zip_code %}
            </div>
            <div class="col-sm-6">
                <label class="field-label">{% if participant.language == 'en' %}City{% else %}Stadt{% endif %}</label>
                {% formfield player.city %}
            </div>
        </div>
    </div>

    <p class="confirm-note">
        {% if participant.language == 'en' %}
            <strong>Please make sure your entry is correct</strong> before clicking Continue.
        {% else %}
            <strong>Bitte vergewissern Sie sich, dass Ihre Eingabe korrekt ist</strong>, bevor Sie auf Weiter klicken.
        {% endif %}
    </p>

</div>

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

{% endblock %}