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

{% block title %}Ambiguity Task – {{ task_label }} known{% endblock %}

{% block content %}
<style>
  .pie {
    width: 140px; height: 140px; border-radius: 50%;
    /* 动态饼图：紫色比例 = --p */
    background: conic-gradient(rebeccapurple var(--p), #e2e8f0 0);
    display: inline-block;
    position: relative;
    box-shadow: 0 0 0 1px #cbd5e1 inset;
  }
  .pie::after{
    content: attr(data-label);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 18px; color: #334155;
  }
  .card { max-width: 820px; margin: 0 auto; }
  .col { width: 50%; padding: 10px; }
  .row { display: flex; gap: 12px; flex-wrap: wrap; }
  .center { text-align: center; }
  .choices { margin-top: 14px; }
</style>

<div class="card">
  <h4 class="center">
    Task (Known purple = {{ known_prob_percent }}%) — Round {{ round_in_task }}/{{ max_rounds }}
  </h4>

  <div class="row">
    <div class="col center">
      <h5>KNOWN Urn</h5>
      <div class="pie"
           style="--p: {{ known_prob_percent }}%;"
           data-label="{{ known_prob_percent }}%"></div>
      <p>已知紫球概率 = <b>{{ known_prob_percent }}%</b></p>
    </div>
    <div class="col center">
      <h5>UNKNOWN Urn</h5>
      <!-- 这里用灰色 + “？”占位，你也可以改成 50% 或别的表现 -->
      <div class="pie"
           style="--p: 50%; background: conic-gradient(#94a3b8 50%, #e2e8f0 0);"
           data-label="?"></div>
      <p>未知紫球概率</p>
    </div>
  </div>

  <hr/>

  <div class="choices">
    {{ formfield 'choice' }}
    {# choices = K(已知), U(未知), I(无差)；在 models.Player.choice 里定义的 #}
  </div>

  <div class="center" style="margin-top:14px;">
    <button class="btn btn-primary">Next</button>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // 强制必选
  for (let r of document.querySelectorAll('input[type=radio]')) r.required = true;
</script>
{% endblock %}