{% block title %}
{% endblock %}

{% block styles %}
<link
  href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&display=swap"
  rel="stylesheet"
/>
<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #f9f9f9;
    font-family: "Merriweather", serif;
    color: #333;
  }

  .full-screen-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 10px;
    box-sizing: border-box;
  }

  .card.card-consent {
    background: #fff;
    border: none;
    border-radius: 6px;
    max-width: 680px;
    padding: 1.2rem 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0, 0, 0, .08);
  }

  .card-consent .card-body {
    font-size: 0.9em;
    line-height: 1.45;
    padding: 0;
  }

  .card-consent u {
    font-weight: 700;
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 2px;
    display: inline-block;
    margin-bottom: 6px;
    margin-top: 12px;
  }

  p { margin: 0.55em 0; }

  .consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #f4f6f8;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    font-weight: 700;
  }
  .consent-check input[type="checkbox"] {
    transform: scale(1.3);
    margin-top: 3px;
    cursor: pointer;
  }

  .btn-primary {
    background-color: #2c3e50;
    border-color: #2c3e50;
    font-weight: 700;
    font-size: 0.9em;
    padding: 6px 16px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    background-color: #243645;
    border-color: #243645;
  }
  .btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .otree-btn-next { margin-top: 16px; }
</style>
{% endblock %}

{% block content %}
<div class="full-screen-container">
  <div class="card card-consent shadow">
    <div class="card-body">

      <p><strong>Dear Participant,</strong></p>

      <p>
        The study goal is to examine individuals' preferences in risky decisions.
        The study poses no risk or harm.
      </p>

      <p>
        In this study, you will answer a brief survey including some demographic
        questions as well as some questions about hypothetical preferences.
      </p>

      <p>
        The duration of the study will be about 3&ndash;4 minutes. In return for
        completing the survey, you will be awarded a fee of <strong>$0.6</strong>.

      </p>

      <p>
        <strong>Confidentiality:</strong> Experimental data will be kept anonymously
        using identification numbers and contain no personal information. This
        anonymized data may be made publicly available as per best scientific practice.
      </p>

      <p>
        <strong>Voluntary participation:</strong> Taking part in this study is
        completely voluntary. If you decide to quit in the middle, this is perfectly
        fine, yet in this case you will not receive a participation fee.
      </p>

      <u>Statement of Consent</u>
      <p>I have read the above information.</p>

      <label class="consent-check">
        <input type="checkbox" name="consent" id="id_consent" value="True">
        <span>I consent to take part in the study.</span>
      </label>

      <button class="otree-btn-next btn btn-primary" id="consent-btn" disabled>
        Continue
      </button>

    </div>
  </div>
</div>

<script>
  // Continue is disabled until the consent box is checked
  const box = document.getElementById('id_consent');
  const btn = document.getElementById('consent-btn');
  box.addEventListener('change', function () {
    btn.disabled = !box.checked;
  });
</script>
{% endblock %}