{{ 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 6 minutes</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Format</span>
                <span class="detail-value">Reading, a short decision, and voice recordings</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Bonus</span>
                <span class="detail-value">Up to $2.00 for a good 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>say your decision aloud</strong>, which we record as a short audio clip.
        A few brief questions follow.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Requirements</div>
        <p>You will need a <strong>microphone</strong> and a quiet place to record. Please use a
        modern browser such as Chrome, Firefox, or Edge (not Safari) with a stable internet
        connection.</p>
        <label class="checkbox-row">
            <input type="checkbox" id="micPermission" required>
            <span>
                <span id="mic-status">Click to enable microphone access</span>
                <span id="mic-icon"></span>
            </span>
        </label>
        <label class="checkbox-row">
            <input type="checkbox" id="quietEnvironment" required>
            <span>I am in a quiet, private place with no background noise (TV, radio, other
            people talking, vacuum cleaners, fans, etc.) and will stay there for the whole
            study.</span>
        </label>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Privacy</div>
        <p>Your privacy is important to us. Since this study involves voice recordings, 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 voice recordings for scientific research. I understand my recordings will be
            analysed for research on decision-making and will <strong>not</strong> be used to train
            or build any voice or machine-learning model.</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 }}