{% load otree staticfiles %}

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

<div class="instructions well well-lg">

    <h3 class="panel-sub-heading">
        성대결게임 설명
    </h3>

    <p>
        당신은 한 명의 다른 참가자와 임의로 짝지워지게 됩니다. 둘 중 한 명은 임의로 남편 플레이어를, 다른 한 명은 아내 플레이어가 될 것입니다. (참가자의 실제 성별과는 무관합니다)
		
    </p>

    <p>
		남편과 아내는 오늘 저녁에 재미있게 지내기로 약속했습니다. 각 사람들은 영화를 볼 수도 있고, 야구를 보러 갈 수도 있습니다. <font color='red'>(성역할에 대한 편견이 깔려있습니다. 양해 부탁드립니다.)</font> 아내는 야구보다는 영화를 좋아하며, 남편은 영화보다는 야구를 좋아합니다. 하지만 둘 모두 무엇을 하더라도 함께 즐기는 것을 따로 다른 것을 즐기는 것보다 좋아합니다. 
    </p>

    <p>
		여러분은 서로 동시에 상대의 결정을 모르는 상태에서 결정을 내려야 합니다. 당신의 보상은 아래와 같이 결정될 것입니다. 
    </p>
    <p>
		당신은 같은 상대와 이 게임을 {{ Constants.num_rounds }} 라운드 진행할 것입니다. 
	</p>
    <p>
        <em>각 칸에서 왼쪽은 아내의 보상, 오른쪽은 남편의 보상입니다. </em>

    </p>

    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            <table class="table table-hover">
                <tr>
                    <th colspan="2"></th>
                    <th colspan="2">남편</th>
                </tr>
                <tr>
                    <th colspan="2"></th>
                    <th>야구</th>
                    <th>영화</th>
                </tr>
                <tr>
                    <th rowspan="2"><span class="rotate90">아내</span> </th>
                    <th>야구</th>
                    <td>{{ Constants.baseball_wife_payoff }}, {{ Constants.baseball_husband_payoff }}</td>
                    <td>{{ Constants.mismatch_payoff }}, {{ Constants.mismatch_payoff }} </td>
                </tr>
                <tr>
                    <th>영화</th>
                    <td>{{ Constants.mismatch_payoff }}, {{ Constants.mismatch_payoff }}</td>
                    <td>{{ Constants.cinema_wife_payoff }}, {{ Constants.cinema_husband_payoff }}</td>
                </tr>
            </table>
        </div>
    </div>

    <p>
         보수구조는 이후 게임 중에 지속적으로 확인할 수 있습니다. 
    </p>

</div>