{% block title %}
    FUNI - Vorbefragung / FUNI - Pre-Survey
{% 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;
    }

    .container {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
    }

    .header {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .header h1 {
        margin: 0;
        font-size: 24px;
        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);
    }

    .info-box {
        background-color: var(--neutral-lightest);
        border-left: 4px solid var(--primary-lighter);
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }

     h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 19px;
    }

    .language-selection {
        display: flex;
        gap: 30px;
        justify-content: center;
        margin: 30px 0;
        flex-wrap: wrap;
    }

    .language-option {
        cursor: pointer;
        flex: 1;
        min-width: 200px;
        max-width: 300px;
    }

    .language-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .language-card {
        background: white;
        border: 3px solid var(--neutral-lightest);
        border-radius: 8px;
        padding: 30px 20px;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    .language-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.12);
        border-color: var(--primary-lighter);
    }

    .language-option input[type="radio"]:checked + .language-card {
        border-color: var(--primary-medium);
        border-left: 4px solid var(--primary-light);
        background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
        box-shadow: 0 4px 8px rgba(0, 95, 155, 0.15);
    }

    .flag-text {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-medium);
        letter-spacing: 0.1em;
        margin-bottom: 10px;
    }

    .language-name {
        color: var(--neutral-dark);
        font-size: 1.2rem;
        font-weight: 500;
    }

    .checkmark {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: var(--primary-medium);
        border-radius: 50%;
        color: white;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
    }

    .language-option input[type="radio"]:checked + .language-card .checkmark {
        opacity: 1;
        transform: scale(1);
    }

    .button-section {
        text-align: center;
        margin-top: 40px;
    }

    .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;
        margin-top: 20px !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;
    }


    /* Responsive design */
    @media (max-width: 600px) {
        .language-selection {
            flex-direction: column;
            align-items: center;
        }

        .language-option {
            max-width: 100%;
        }
    }
</style>


<div class="header">
    <h1>Sprachauswahl / Language Selection</h1>
</div>

<div class="card">
    <h2>Bitte wählen Sie Ihre bevorzugte Sprache</h2>
    <h2>Please select your preferred language</h2>

    <div class="info-box">
        <p style="margin: 0; text-align: center;">
            <strong>Wählen Sie die Sprache, in der Sie die Studie durchführen möchten.</strong><br>
            <strong>Choose the language in which you would like to complete the study.</strong>
        </p>
    </div>

    <div class="language-selection">
        <label class="language-option" for="id_language_0">
            <input type="radio" name="language" id="id_language_0" value="de" required>
            <div class="language-card">
                <div class="flag-text">DE</div>
                <div class="language-name">Deutsch</div>
                <div class="checkmark">✓</div>
            </div>
        </label>

        <label class="language-option" for="id_language_1">
            <input type="radio" name="language" id="id_language_1" value="en" required>
            <div class="language-card">
                <div class="flag-text">EN</div>
                <div class="language-name">English</div>
                <div class="checkmark">✓</div>
            </div>
        </label>
    </div>
</div>

<div class="button-section">
    <button class="otree-btn-next btn btn-primary">
        Continue / Weiter
    </button>
</div>

{% endblock %}