{{ extends 'global/Page.html' }}
{{ block title }}Introduction{{ endblock }}

{{ block content }}

<style>
    body { background-color: #f4f6f8 !important; color: #333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    .page-header, .otree-btn-next { display: none !important; }

    .consent-container {
        max-width: 780px;
        margin: 40px auto;
        background-color: #ffffff;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        line-height: 1.75;
        font-size: 1rem;
    }

    .consent-title {
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 6px;
        font-weight: bold;
        color: #2c3e50;
    }
    .consent-subtitle {
        text-align: center;
        color: #777;
        font-size: 0.95rem;
        margin-bottom: 28px;
        padding-bottom: 18px;
        border-bottom: 2px solid #e9ecef;
    }

    .consent-section {
        margin-bottom: 24px;
    }
    .consent-section-title {
        font-weight: bold;
        color: #2c3e50;
        font-size: 1.05rem;
        margin-bottom: 6px;
    }
    .consent-section p {
        margin: 0 0 8px 0;
        color: #444;
    }

    .consent-highlight {
        background: #e8f4f8;
        border-left: 5px solid #17a2b8;
        padding: 15px 18px;
        margin: 16px 0;
        border-radius: 4px;
        font-size: 0.95rem;
        color: #2c3e50;
    }

    .consent-contact {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        padding: 15px 18px;
        border-radius: 4px;
        margin: 16px 0;
        font-size: 0.95rem;
        color: #555;
        line-height: 1.8;
    }
    .consent-contact strong {
        color: #2c3e50;
    }

    .consent-check-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin: 30px 0 24px;
        padding: 18px;
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 6px;
    }
    .consent-check-wrapper input[type="checkbox"] {
        margin-top: 4px;
        transform: scale(1.4);
        accent-color: #007bff;
        cursor: pointer;
        flex-shrink: 0;
    }
    .consent-check-wrapper label {
        cursor: pointer;
        font-size: 1rem;
        color: #2c3e50;
        font-weight: bold;
        line-height: 1.6;
    }

    .consent-error {
        color: #dc3545;
        text-align: center;
        font-size: 0.95rem;
        margin-bottom: 12px;
        display: none;
    }

    .btn-consent {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        background: #007bff;
        color: #ffffff;
        border: none;
        padding: 15px;
        font-size: 1.15rem;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s;
    }
    .btn-consent:hover:not(:disabled) {
        background: #0056b3;
    }
    .btn-consent:disabled {
        background: #cccccc;
        cursor: not-allowed;
    }
</style>

<div class="consent-container">
    <div class="consent-title">Informed Consent</div>
    <div class="consent-subtitle">Please read the following information carefully before proceeding.</div>

    <div class="consent-section">
        <div class="consent-section-title">Purpose of the Study</div>
        <p>
            You are invited to participate in a research study conducted at the
            <strong>University of Vienna</strong>, Department of <strong>Economics</strong>.
            This experiment investigates decision-making behavior in interactive tasks.
            The study is part of a Master's thesis supervised by <strong>Prof. Karl Schlag</strong>.
            Data collection serves exclusively for scientific research within the framework
            of this thesis [GDPR Art. 89(1)].
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">What You Will Do</div>
        <p>
            The experiment consists of two tasks, followed by a brief questionnaire.
            The entire session takes approximately <strong>10–15 minutes</strong>.
            Detailed instructions will be provided at the beginning of each part.
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Compensation</div>
        <p>
            Each task is linked to a <strong>personal lottery</strong> for a prize of <strong>€5</strong>.
            Your chance of winning depends on your own performance — the more points you earn, 
            the higher your chance. You can earn up to <strong>€10 in total</strong> across both tasks.
            Details will be explained before each task.
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Voluntary Participation &amp; Withdrawal</div>
        <p>
            Participation in this study is entirely voluntary and based on your consent
            [GDPR Art. 6(1)(a)]. Minors do not participate in this study.
        </p>
        <p>
            You may withdraw your consent at any time without providing a reason and
            without any negative consequences [GDPR Art. 7(3)]. To withdraw during the
            experiment, simply close the browser window. If you withdraw, your data will not be used.
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Data Collection &amp; Privacy</div>
        <p>
            We collect your choices, response times, and questionnaire answers.
            Only data necessary for the research is processed [GDPR Art. 5(1)(b)].
        </p>
        <div class="consent-highlight">
            <strong>Data protection provisions:</strong>
            <ul style="margin: 10px 0 0 0; padding-left: 18px;">
                <li style="margin-bottom: 8px;">
                    Data is stored in pseudonymised form (sequential ID numbers) and will not be
                    shared with third parties [GDPR Art. 89(1)].
                </li>
                <li style="margin-bottom: 8px;">
                    Demographic data constitutes personal data, but tracing it back to an individual
                    is neither intended nor technically feasible [GDPR Art. 4(5)].
                </li>
                <li style="margin-bottom: 8px;">
                    You have the right to request deletion of and access to your personal data after
                    the evaluation, provided you have supplied such data [GDPR Art. 5(1)(e)].
                </li>
            </ul>
        </div>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Prize Draw &amp; Email</div>
        <p>
            At the end of the experiment, you may voluntarily provide your email address to
            be contacted if you win a prize (up to €10 across two personal lotteries of €5 each). 
            Your email is collected separately from your research data and cannot be linked to 
            your responses [GDPR Art. 5(1)(b)]. A separate consent form for this will appear 
            on the final page. The email data will be used solely to notify winners and will be 
            deleted immediately after the prizes are distributed.
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Risks</div>
        <p>
            This study poses no known risks beyond those of everyday computer use.
            Some parts of the experiment involve visual content displayed on screen.
            If you experience any discomfort, you may stop immediately.
        </p>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Contact Information</div>
        <div class="consent-contact">
            <strong>Researcher:</strong> Xiaopeng Dong — a12406641@unet.univie.ac.at<br>
            <strong>Supervisor:</strong> Prof. Karl Schlag — karl.schlag@univie.ac.at
        </div>
    </div>

    <div class="consent-section">
        <div class="consent-section-title">Important Reminders</div>
        <ul style="margin: 8px 0 0 0; padding-left: 20px; color: #444;">
            <li style="margin-bottom: 8px;">Please read all instructions carefully before starting each task.</li>
            <li style="margin-bottom: 8px;">Please do not use your browser's "Back" or "Refresh" buttons during the experiment.</li>
        </ul>
    </div>

    <div class="consent-check-wrapper">
        <input type="checkbox" id="consent-checkbox" onchange="toggleConsent()">
        <label for="consent-checkbox">
            I have read and understood the information above. I voluntarily consent to participate
            in this study [GDPR Art. 6(1)(a)]. I understand that my data will be collected in
            pseudonymised form and that I may withdraw my consent at any time without consequences
            [GDPR Art. 7(3)].
        </label>
    </div>

    <div class="consent-error" id="consent-error">
        Please check the box above to confirm your consent before continuing.
    </div>

    <button type="button" class="btn-consent" id="btn-consent" disabled onclick="submitConsent()">
        I Agree — Begin Experiment
    </button>
</div>

<input type="hidden" name="consent_given" id="in_consent" value="False">
<div style="display: none;">
    {{ formfield_errors 'consent_given' }}
</div>

<script>
    function toggleConsent() {
        var checked = document.getElementById('consent-checkbox').checked;
        document.getElementById('btn-consent').disabled = !checked;
        document.getElementById('consent-error').style.display = 'none';
    }

    function submitConsent() {
        if (!document.getElementById('consent-checkbox').checked) {
            document.getElementById('consent-error').style.display = 'block';
            return;
        }
        document.getElementById('in_consent').value = 'True';
        document.getElementById('btn-consent').disabled = true;
        document.getElementById('btn-consent').textContent = 'Loading...';
        document.forms[0].submit();
    }
</script>

{{ endblock }}