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

{% 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>

<p>
당신은 경희아파트의 주민입니다. 현재 경희아파트에는 70여명의 주민이 거주중입니다.
</p>
<p>아파트 앞 골목에서 비명 소리가 들렸습니다. 당신은 경찰에 전화를 걸어 살릴 수 있습니다. (비용 {{Constants.call_cost}} 소모) 만일 주민들 중 한 명이라도 전화를 건다면 이 사람은 살 수 있으며, 이때에는 {{Constants.live_payoff}}의 보상이 발생합니다. 반면 한 명도 걸지 않으면 이 사람은 치명적인 부상을 입게 되며, 이때에는 {{Constants.death_payoff}}의 보상을 얻게 됩니다. </p>
<p>자, 이제 자신의 행동을 선택해 주세요!</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>
        한 명이라도 전화를 한 경우
      </th>
      <th>
        한 명도 전화를 걸지 않은 경우
      </th>
    </tr>
    <tr class="highlight-row-on-hover">
      <th rowspan="2">
        <span class="rotate90">본인(me)</span>
      </th>
      <td>
        <button name="hasCalled" value="True" class="btn btn-primary btn-large">전화를 건다</button>
      </td>
      <td>
        {{Constants.live_call_payoff}}
      </td>
      <td>
        N/A (발생할 수 없는 경우임)
      </td>
    </tr>
    <tr class="highlight-row-on-hover">
      <td>
        <button name="hasCalled" value="False" class="btn btn-primary btn-large">전화를 걸지 않는다</button>
      </td>
      <td>
        {{Constants.live_payoff}}
      </td>
      <td>
        {{Constants.death_payoff}}
      </td>
    </tr>
  </table>

</div>

{% endblock %}