{% extends "global/Base.html" %}
{% load staticfiles otree %}

{% block title %}
    행동 결정
{% endblock %}

{% block styles %}

<link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

<style>
    .highlight-row-on-hover:hover td {
        background-color: #fcf8e3;
    }
</style>

{% endblock %}

{% block content %}

<p>
  현재 라운드는 총 {{ Constants.num_rounds }} 중 {{ subsession.round_number }} 입니다.
</p>

    <div class="form-group required">
      <table class = "table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
          <th colspan="2" rowspan="2">

          </th>
          <th colspan="2">
            상대방
          </th>
        </tr>
        <tr>
          <th>
            협력(Cooperate)
          </th>
          <th>
            배반(Defect)
          </th>
        </tr>
        <tr class="highlight-row-on-hover">
          <th rowspan="2">
            <span class="rotate90">본인(me)</span>
          </th>
          <td>
            <button name="decision" value="Cooperate" class="btn btn-primary btn-large">나는 협조(Cooperate)할 것이다</button>
          </td>
          <td>
            {{Constants.both_cooperate_payoff}},{{Constants.both_cooperate_payoff}}
          </td>
          <td>
            {{Constants.betrayed_payoff}},{{Constants.betray_payoff}}
          </td>
        </tr>
        <tr class="highlight-row-on-hover">
          <td>
            <button name="decision" value="Defect" class="btn btn-primary btn-large">나는 배반(Defect)할 것이다</button>
          </td>
          <td>
            {{Constants.betray_payoff}},{{Constants.betrayed_payoff}}
          </td>
          <td>
            {{Constants.both_defect_payoff}},{{Constants.both_defect_payoff}}
          </td>
        </tr>
      </table>

    </div>

{% endblock %}