{% extends "base.html" %}
{% block title %}Welcome — AI-Assisted Programming Study{% endblock %}

{% block content %}
<div class="page-narrow">
  <div class="card">
    <h1 class="card-title">Welcome</h1>
    <p class="card-subtitle">AI-Assisted Programming Study · Version 1.0</p>

    <section class="info-block">
      <h2>About this study</h2>
      <p>You will solve three short Python programming tasks using an AI assistant. After each task you will answer brief comprehension questions and a short survey.</p>
      <ul>
        <li>One warm-up task (not included in the analysis)</li>
        <li>Two main tasks (~10–15 min each)</li>
        <li>A short final questionnaire</li>
      </ul>
    </section>

    <section class="info-block">
      <h2>Important notes</h2>
      <ul>
        <li>This is not an exam and is not connected to your course grade.</li>
        <li>You may stop at any time without penalty.</li>
        <li>Some assistant responses may require careful review before the code runs correctly — this is expected.</li>
        <li>Do not use other AI tools, search engines, or ask for help from others.</li>
      </ul>
    </section>

    <form method="POST" action="/start" class="start-form">
      {% if error %}
      <div class="alert alert-error">{{ error }}</div>
      {% endif %}

      <div class="form-group">
        <label for="participant_id">Pseudo</label>
        <input type="text" id="participant_id" name="participant_id"
               placeholder="Enter your pseudo" required />
      </div>

      <div class="form-group">
        <label for="study_group">Assigned Group</label>
        <select id="study_group" name="study_group" required>
          <option value="">— Select group —</option>
          <option value="A">Group A</option>
          <option value="B">Group B</option>
        </select>
        <span class="form-hint">Enter the group assigned by the researcher.</span>
      </div>

      <section class="consent-section">
        <h2>Consent checklist</h2>
        <label class="checkbox-label">
          <input type="checkbox" name="consent_1" required />
          I understand the purpose of the study.
        </label>
        <label class="checkbox-label">
          <input type="checkbox" name="consent_2" required />
          I understand what I will be asked to do.
        </label>
        <label class="checkbox-label">
          <input type="checkbox" name="consent_3" required />
          I understand that participation is voluntary and I may stop at any time.
        </label>
        <label class="checkbox-label">
          <input type="checkbox" name="consent_4" required />
          I understand that my programming interactions and questionnaire responses may be recorded for research analysis.
        </label>
        <label class="checkbox-label">
          <input type="checkbox" name="consent" value="yes" required />
          <strong>I agree to participate in this study.</strong>
        </label>
      </section>

      <button type="submit" class="btn btn-primary btn-lg">Start Study →</button>
    </form>
  </div>
</div>
{% endblock %}