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

{% block title %}
    第 {{subsession.round_number}} / {{ Constants.num_rounds }} 轮
    {% if subsession.treatment == 2 or subsession.treatment == 3 or subsession.treatment == 4 %}评分任务
    {% elif subsession.treatment == 5 or subsession.treatment == 6 %}AI 评分中......
    {% endif %}
{% endblock %}

{% block content %}

<br>

    <p><b>你是玩家 {{player.id_in_group}}，你的初始资产是 {{player.endowment}}，投资给小组账户 {{ player.contribution }}，投资百分比为 {{player.contribution_prop}}%。</b></p>
    <p>以下是其他三位玩家的决策，包括“初始资产”、“投资给小组账户的代币”以及“投资百分比”。</p>
    <p>其中投资百分比 = 投资给小组账户的代币 / 初始资产</p>

<br>

    <table class="table" style="text-align:center">
            <tr>
                <th>玩家</th>
                <th>初始资产</th>
                <th>投资给小组账户的代币</th>
                <th>投资百分比</th>
            </tr>
        {% for p in player.get_others_in_group %}
            <tr>
                <td>玩家 {{ p.id_in_group }}</td>
                <td>{{ p.endowment }}</td>
                <td>{{ p.contribution }}</td>
                <td>{{ p.contribution_prop}}%</td>
            </tr>
        {% endfor %}
    </table>

<br><br>



{% if subsession.treatment == 2 or subsession.treatment == 3 or subsession.treatment == 4 %}

    {% if subsession.round_number == 1 or subsession.round_number == 11 or subsession.round_number == 20 %}

    <p>现在请根据上述决策，在第 1 列给出您对三位玩家的评分，评分范围为 0 - {{ Constants.MAX_SCORE }} 之间的整数。</p>
    <p>完成第 1 列评分之后，请继续完成第 2 列的三个问题。</p>

    <br>

    <form method="POST">
        {% csrf_token %}
        <table>
          {% for field in form %}
            {% if forloop.counter0|divisibleby:2 %}
              <tr>
            {% endif %}
            <td class="field-label-spacer"></td>
            <td class="field-label{% if forloop.counter0|divisibleby:2 %} first-label bold-label{% endif %}{% if forloop.counter0|add:-1|divisibleby:2 %} italic-label{% endif %}">{{ field.label }}</td>
            <td class="field-value">{{ field }}</td>
            {% if forloop.counter0|add:1|divisibleby:2 or forloop.last %}
              </tr>
            {% endif %}
          {% endfor %}
        </table>
      </form>
    {% else %}
    <p>现在请根据上述决策，在第 1 列给出您对三位玩家的评分，评分范围为 0 - {{ Constants.MAX_SCORE }} 之间的整数。</p>

    <br>

    <form method="POST">
        {% csrf_token %}
        <table>
          {% for field in form %}
              <tr>
<!--            <td class="field-label-spacer"></td>-->
            <td class="field-label{% if forloop.counter0|divisibleby:1 %} first-label bold-label{% endif %}">{{ field.label }}</td>
            <td class="field-value">{{ field }}</td>
              </tr>
          {% endfor %}
        </table>
      </form>
    {% endif %}

    <br><br>

    <div style="display:inline; text-align:center">
    <p><input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="下一页"></p>
    </div>

{% elif subsession.treatment == 5 or subsession.treatment == 6 %}

    {% if subsession.round_number == 1 or subsession.round_number == 11 or subsession.round_number == 20 %}

    <p>现在AI正在根据上述决策，给您和其他三位玩家进行评分，评分范围为 0 - {{ Constants.MAX_SCORE }} 之间的整数。</p>
    <p>请耐心等待，评分结束后会自动弹出按钮，然后就可点击查看AI评分结果</p>
    <p>在您等待AI评分结果时，请回答下面四个问题。</p>

    <br>

    <form method="POST">
        {% csrf_token %}
        <table>
          {% for field in form %}
            {% if forloop.counter0|divisibleby:1 %}
              <tr>
            {% endif %}
            <td class="field-label-spacer"></td>
            <td class="field-label">{{ field.label }}</td>
            <td class="field-value">{{ field }}</td>
            {% if forloop.counter0|add:1|divisibleby:2 or forloop.last %}
              </tr>
            {% endif %}
          {% endfor %}
        </table>
      </form>

    {% else %}

    <p>现在AI正在根据上述决策，给您和其他三位玩家进行评分，评分范围为 0 - {{ Constants.MAX_SCORE }} 之间的整数。</p>
    <p>请耐心等待，评分结束后会自动弹出按钮，然后就可点击查看AI评分结果</p>

    {% endif %}

    <br><br>

    <div id="countdown" style="display:none;"></div>

    <div id="nextPageButton" style="display:none;">
      <div style="text-align:center;">
        <p>
          <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="查看AI评分结果">
        </p>
      </div>
    </div>

    {% if subsession.treatment == 5 %}
        <script>
          // 设置倒计时时长（以毫秒为单位）
          var countdownDuration = 16100;

          // 在页面加载完成后执行倒计时
          window.onload = function() {
            startCountdown();
          };

          function startCountdown() {
            // 显示倒计时
            document.getElementById("countdown").style.display = "block";

            // 倒计时结束后显示按钮
            setTimeout(function() {
              document.getElementById("countdown").style.display = "none";
              document.getElementById("nextPageButton").style.display = "block";
            }, countdownDuration);
          }
    </script>
    {% elif subsession.treatment == 6 %}
        <script>
          // 设置倒计时时长（以毫秒为单位）
          var countdownDuration = 14700;

          // 在页面加载完成后执行倒计时
          window.onload = function() {
            startCountdown();
          };

          function startCountdown() {
            // 显示倒计时
            document.getElementById("countdown").style.display = "block";

            // 倒计时结束后显示按钮
            setTimeout(function() {
              document.getElementById("countdown").style.display = "none";
              document.getElementById("nextPageButton").style.display = "block";
            }, countdownDuration);
          }
        </script>
    {% endif %}
{% endif %}



{% endblock %}

{% block styles %}
  <style>
    td.field-label-spacer {
      width: 10px;
    }
    td.field-label {
      padding-right: 10px;
    }
    td.field-value {
      padding-left: 10px;
    }
    td.first-label {
      font-weight: bold;
    }
    td.italic-label {
      font-style: italic;
    }
  </style>
{% endblock %}