{{ block title }}Informed Consent{{ endblock }}
{{ block content }}

<div class="container mt-4" style="max-width: 760px;">

  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">

      <h4 class="fw-bold mb-3">Study Information</h4>
      <p>
        You are invited to participate in a research study on <strong>decision-making in
        business procurement</strong>.
      </p>

      <hr>

      <h5 class="fw-semibold mt-3 mb-2">What will you do?</h5>
      <p>
        You will work with a partner to evaluate and select a supplier over
        <strong>5 rounds</strong>. Each round, you will review information and make a
        recommendation. The entire session takes approximately <strong>30–40 minutes</strong>.
      </p>

      <h5 class="fw-semibold mt-3 mb-2">Risks &amp; Benefits</h5>
      <p>
        There are no foreseeable risks beyond those of normal computer use. Your participation
        contributes to the scientific understanding of human-AI collaboration.
      </p>

      <h5 class="fw-semibold mt-3 mb-2">Confidentiality</h5>
      <p>
        All responses are <strong>anonymous</strong>. No personally identifiable information
        will be collected or published. Data will be stored securely and used solely for
        research purposes.
      </p>

      <h5 class="fw-semibold mt-3 mb-2">Voluntary Participation</h5>
      <p>
        Participation is entirely voluntary. You may withdraw at any time without penalty.
      </p>

      <h5 class="fw-semibold mt-3 mb-2">Contact</h5>
      <p>
        If you have questions about this study, please contact the research team at
        <a href="mailto:research@university.edu">jian.lee03@kedgebs.com</a>.
      </p>

    </div>
  </div>

  <div class="card border-warning bg-warning bg-opacity-10 mb-4">
    <div class="card-body">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="consentCheck" required>
        <label class="form-check-label fw-semibold" for="consentCheck">
          I have read the information above. I understand my participation is voluntary,
          and I agree to take part in this study.
        </label>
      </div>
    </div>
  </div>

  <div class="text-center">
    <button type="submit" id="consentBtn" class="btn btn-primary btn-lg px-5" disabled>
      I Agree &amp; Continue
    </button>
  </div>

</div>

<script>
  const checkbox = document.getElementById('consentCheck');
  const btn      = document.getElementById('consentBtn');
  checkbox.addEventListener('change', () => {
    btn.disabled = !checkbox.checked;
  });
</script>

{{ endblock }}