{% extends "global/Page.html" %}
{% load otree %}

{% block title %}質問{% endblock %}

{% block content %}

<style>
  /* --- 上下1カラムの共通レイアウト（childexperience準拠） --- */
  .panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (max-width: 860px) {
    .panel { grid-template-columns: 1fr; }
  }
  .box {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    background: #ffffff;
  }
  .hint { color: #666; font-size: 0.95rem; }
  .btn-row > * { margin-right: 8px; }

  /* --- oTree 入力フォーム見栄え調整 --- */
  .otree-body .form-group,
  .otree-body ._formfield {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fafafa;
    border: 1px solid #eee;
  }
  .otree-body .control-label,
  .otree-body ._formfield label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
  }

  /* ==== ラジオボタンデザイン（childexperience準拠＋折返しOK） ==== */
  .otree-body .controls,
  .form-group .controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;           /* ✅ demographicsは基本選択肢が少ないので最初から折り返し可 */
    gap: 4px 8px;
    overflow-x: visible;
  }

  /* ラベル見た目 */
  .otree-body input[type='radio'] { display: none; }
  .otree-body .controls label,
  .otree-body .radio-inline {
    position: relative;
    flex: 0 0 auto;            /* 幅は内容に応じて可変 */
    white-space: nowrap;
    text-align: left;
    padding: 6px 0 6px 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    user-select: none;
  }

  /* 未選択マーカー */
  .otree-body .controls label::before,
  .otree-body .radio-inline::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border: 2px solid #1711c7ff;
    border-radius: 50%;
    background: #fff;
    transition: all .25s ease;
  }

  /* 選択時 */
  .otree-body input[type='radio']:checked + label,
  .otree-body input[type='radio']:checked + .radio-inline {
    background-color: #1711c7ff;
    color: #fff;
    font-weight: 700;
  }
  .otree-body input[type='radio']:checked + label::before,
  .otree-body input[type='radio']:checked + .radio-inline::before {
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-width: 5px;
  }
</style>

<div class="panel">

  <div class="box">
    <h4 class="mb-2">回答のお願い</h4>
    <p class="hint mb-0">
      以下のそれぞれの項目はあなた自身にどれくらいあてはまりますか。<br>
      非常にあてはまる～まったくあてはまらないの選択肢からお選びください。
    </p>
  </div>

  <div class="box">
    <h5 class="mb-2">設問</h5>

    {{ formfield player.neuro1 }}
    {{ formfield player.neuro2 }}

  </div>

</div>


<div class="panel">

  <div class="box">
    <h4 class="mb-2">回答のお願い</h4>
    <p class="hint mb-0">
      以下は、あなたの基本的なプロフィールに関する質問です。<br>
      当てはまるものを選択してください。
    </p>
  </div>

  <div class="box">
    <h5 class="mb-2">設問</h5>

    {{ formfield player.age }}
    {{ formfield player.gender }}
    
    <div class="btn-row mt-3">
      {{ next_button }}
    </div>
  </div>

</div>

{% endblock %}