{{ block styles }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ static 'css/consent.css' }}">
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'js/consent.js' }}"></script>
{{ endblock }}

{{ block content }}

<div class="consent-page">

    <div class="page-header">
        <p class="page-label">Welcome</p>
        <h1 class="page-title">Shipping Decisions Study</h1>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Study details</div>
        <div class="detail-rows">
            <div class="detail-row">
                <span class="detail-label">Duration</span>
                <span class="detail-value">Approximately 2-3 minutes</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Format</span>
                <span class="detail-value">Reading and a short click-through decision</span>
            </div>
        </div>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">What you will do</div>
        <p>You will imagine placing an online order and choosing between two shipping
        companies at checkout. You will look at each company's recent delivery history and
        then <strong>click which company you would choose</strong>. A few brief questions
        follow.</p>
        <p>As part of the task you will work with a hypothetical points budget.
            Even though these points will not affect your pay, we ask you to decide
        as if it would.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Requirements</div>
        <p>Please use a modern browser such as Chrome, Firefox, or Edge (not Safari) with a
        stable internet connection.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Privacy</div>
        <p>Your privacy is important to us. Please read the
            <a class="privacy-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGDPR">
                privacy policy
            </a>
            carefully before proceeding.
        </p>
        <label class="checkbox-row">
            <input type="checkbox" id="GDPR" required>
            <span>I have read and agree to the privacy policy, including the pseudonymous processing
            of my responses for scientific research.</span>
        </label>
    </div>

    <input type="hidden" name="screen_width" id="screen-width" value="">
    <input type="hidden" name="screen_height" id="screen-height" value="">
    <input type="hidden" name="touch_capable" id="touch-capable" value="">

    <div class="begin-row">
        <button type="submit" class="begin-btn" id="submitButton">Proceed to study &rarr;</button>
    </div>

</div>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasGDPR" aria-labelledby="offcanvasGDPRLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasGDPRLabel">Privacy Policy</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        {{ include C.PRIVACY_TEMPLATE }}
    </div>
</div>

{{ endblock }}