{{ block content }}

<div class="card bg-mid m-0">
    <h2 class="card-header consent-title">Consent for Participation</h2>
    <div class="card-body">
        <p>We invite you to participate in a study conducted by researchers from the Complexity Science Hub Vienna. Your participation is entirely voluntary.</p>

        <p><strong>What will you do?</strong></p>
        <p>You will participate in an online research experiment with repeated rounds. Each round, you will be part of a group voting on options. Your goal is to find the best option your group should choose, and decide how your group should make the choice.</p>

        <p><strong>Time and Payment:</strong></p>
        <ul>
            <li><strong>Phase 1 - Training & Comprehension:</strong> about 10 minutes, pay $2.50</li>
            <li><strong>Phase 2 - Online Group Experiment:</strong> about 35 minutes, pay $4.50-$11.25 based on performance</li>
            <li><strong>Waiting</strong> - If you commit to the experiment but cannot be grouped in 10 minutes, we will pay $1.50 for waiting</li>
        </ul>
        
        <p>After the training phase, you can choose whether to continue to the main group experiment. Payment depends on completing the experiment and your performance.</p>

        <p><strong>Who can participate?</strong></p>
        <p>You have been invited because you are at least 18 years of age and English speaking.</p>

        <p><strong>Purpose:</strong></p>
        <p>This study examines how people organize themselves when solving problems and make decisions in groups. Results help us understand how individuals deal with making decisions in groups.</p>

        <p><strong>Your Rights:</strong></p>
        <p>You may withdraw at any time without negative consequences. However, payment requires completing the experiment. There are no foreseeable risks from participation.</p>

        <p>If you wish to withdraw, contact us at <a href="mailto:collectivemindslab@csh.ac.at">collectivemindslab@csh.ac.at</a>.</p>

        <p><strong>Declaration of Consent:</strong></p>
        <p>By clicking 'Yes' you confirm that you have read this information, understand the study, and voluntarily agree to participate.</p>
    </div>
</div>

<br>

<!-- Consent buttons -->
<div class="consent-buttons">
    <h5 class="consent-question">Do you wish to participate in this study?</h5>
    <button type="button" class="button button2" onclick="submitConsent(true)">Yes</button>
    <button type="button" class="button button2" onclick="submitConsent(false)">No</button>
    <input type="hidden" name="consented" id="id_consented" value="">
</div>

<br>

<script>
function submitConsent(value) {
    document.getElementById('id_consented').value = value;
    highlightButton('submitConsent', value);
    maybeSubmitForm();
}

function highlightButton(prefix, value) {
    const buttons = document.querySelectorAll(`div > button[onclick^="${prefix}"]`);
    buttons.forEach(btn => {
        btn.style.backgroundColor = 'white';
        btn.style.color = 'black';
    });
    const index = value === true || value === 'true' ? 0 : 1;
    buttons[index].style.backgroundColor = '#008CBA';
    buttons[index].style.color = 'white';
}

function maybeSubmitForm() {
    const consent = document.getElementById('id_consented').value;
    if (consent !== '') {
        document.querySelector('form').submit();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('id_consented').value = '';
});
</script>

<style>
.button {
    background-color: #3182bd;
    border: none;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
}

.button2 {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

/* Center consent buttons and text */
.consent-buttons {
    text-align: center;
    margin-top: 20px;
}

.consent-buttons button {
    margin: 0 10px;
}

.consent-title {
    text-align: center;
}

.consent-question {
    text-align: center;
    margin-bottom: 20px;
}
</style>

{{ endblock }}