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

{% block title %}
<div class="var_title">協力しますか？
    <span class="var_title" style="font-size:medium;">
     （第{{ subsession.round_number }}回、参加者{{ group.num_of_group }}人）<br>
    </span>
</div>
{% endblock %}


{% block content %}

・<span class="red">「協力」</span>を選んだ人は{{ group.cost }}のコストを支払います<br>
・「成功」すれば全員が{{ coop_success }}の利得、「失敗」すれば{{ group.fail }}の利得を得ます。<br><br>

<div align="left">
      <div class="card bg-light instructions" style="overflow:auto; width:600px; padding:1px; box-shadow: 2px 2px 4px gray; margin-left:15px;">
          <div class=" card-body">
              <div class="wrapper">
                <div align="left">
                    ・あなたを含めた<span class="red">{{ group.num_of_group }}人のうち、{{ group.threshold }}人以上が「協力」すれば「成功」</span><br>
                    {{ if player.group.is_sequential != 0}}
                        {{ if how_many_more <= 0}} 
                        ・すでに<span class="red"><u>成功が確定</u></span>しています。<br><br>
                        {{ else }}
                        <span class="red">・<u>あと{{ how_many_more }}人</u></span>が協力すれば成功<br>
                        {{ endif }}
                    {{ endif }}
                    <br>
                </div>

                <div align="left">① あなたが<span class="red">協力した場合</span>の利得</div>
                <div class="inline-block_test">
                  <table>
                    <tbody>
                      <div align="left">　　　　　　　　あなた以外の協力者数</div>
                      <tr>
                        <th></th>
                        {{ if group.num_of_group != 2 and threshold_minus2 >= 0}}
                          <th>{{threshold_minus2}}人{{ if group.num_of_group != 3 }}以下{{ endif }}</th>
                        {{ endif }}
                        <th>{{threshold_minus1}}人</th>
                        <th>{{group.threshold}}人{{ if group.num_of_group > group.threshold }}以上{{ endif }}</th>
                      </tr>
                      <tr>
                        <th>あなた</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{coop_fail_minus}}</td>
                        {{ endif }}
                        <td>{{coop_success}}</td>
                        <td>{{coop_success}}</td>
                      </tr>
                      <tr>
                        <th>協力した他者</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{coop_fail_minus}}</td>
                        {{ endif }}
                        <td>{{coop_success}}</td>
                        <td>{{coop_success}}</td>
                      </tr>
                      <tr>
                        <th>しない他者</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{group.fail}}</td>
                        {{ endif }}
                        <td>{{group.success}}</td>
                        <td>{{group.success}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <br><br>

                <div align="left">② あなたが<span class="red">協力しない場合</span>の利得</div>
                <div class="inline-block_test">
                  <table>
                    <tbody>
                      <div align="left">　　　　　　　　あなた以外の協力者数</div>
                      <tr>
                        <th></th>
                        {{ if group.num_of_group != 2 and threshold_minus2 >= 0}}
                        <th>{{threshold_minus2}}人{{ if group.num_of_group != 3 }}以下{{ endif }}</th>
                        {{ endif }}
                        <th>{{threshold_minus1}}人</th>
                        <th>{{group.threshold}}人{{ if group.num_of_group > group.threshold }}以上{{ endif }}</th>
                      </tr>
                      <tr>
                        <th>あなた</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{group.fail}}</td>
                        {{endif}}
                        <td>{{group.fail}}</td>
                        <td>{{group.success}}</td>
                      </tr>
                      <tr>
                        <th>協力した他者</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{coop_fail_minus}}</td>
                        {{endif}}
                        <td>{{coop_fail_minus}}</td>
                        <td>{{coop_success}}</td>
                      </tr>
                      <tr>
                        <th>しない他者</th>
                        {{ if group.num_of_group != 2}}
                          <td>{{group.fail}}</td>
                        {{endif}}
                        <td>{{group.fail}}</td>
                        <td>{{group.success}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <br><br>

                {{if player.group.is_sequential != 0}}
                  <div align="left">
                    {{ for p in group.get_players }}
                        　参加者{{ p.id_in_group }}:　
        
                        {{ if p.id_in_group < count_cont }}  
                            {{ if p.contribution == 1 }}
        
                            協力する
                            {{ elif p.contribution == 0 }}
                            協力しない
                            {{ else }}
                            {{ endif }}
                        {{ elif p.id_in_group == count_cont }}  
                            <span class="blink">
                            選択中
                            </span>
                        {{ else }}
                            <span class="lightgray">
                            未選択
                            </span>
                        {{ endif }}
        
        
                                {{ if p.id_in_group == player.id_in_group }}
                                （あなた）
                                {{ endif }}
                        <br>
                    {{ endfor }}
                  </div>
                {{ endif }}
          </div>
      </div>
  </div><br>


  <p>・協力しますか？（残り<span>{{ timer_text }}
    <span class="otree-timer__time-left"></span>
    </span>）<br><br></p>

    &nbsp;&nbsp;<button class="btn-primary rounded" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal1">　YES　</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;<button class="btn-primary rounded" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal2">　NO　</button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel1">確認</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>「協力する」で間違いありませんか？</p>
            <p>（{{ group.threshold }}人以上の協力で<span class="red">利益は{{ coop_success }}</span>、{{ group.threshold }}人未満なら<span class="red">ー{{ coop_fail }}</span>）</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" name="contribution" value="1">OK</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">やり直す</button>
          </div>
        </div>
      </div>
    </div>
 

  
  <!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel2">確認</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>「協力しない」で間違いありませんか？</p>
          <p>（{{ group.threshold }}人以上の協力で<span class="red">利益は{{ group.success }}</span>、{{ group.threshold }}人未満なら<span class="red">{{ group.fail }}</span>）</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" name="contribution" value="0">OK</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">やり直す</button>
        </div>
      </div>
    </div>
  </div>

  <style type="text/css">

/* 　https://html-css-javascript.com/table/  を使い表を生成（以下、ふっかつの呪文）
  <!-- [false,table_p2L,3,3,48D4FF,1,5,false,false,2,4,86B5D1,false,62BBAB,FFFFFF,false,D9E7FF,0,0,0,false,48,false,30,true,5,10,FCFCFC,false,EEEEEE,F73BA0,false,000000,bold,0,0,false,50,false,30,true,2,5,FFFFFF,true,true,false,true,true,false] -->
     */

  <!--
    table{
      border-spacing: 0;
      border-collapse: separate;
    }
    table th,table td{
      border-top: 1px solid #143B47;
      border-left: 1px solid #143B47;
    }
    table th{
      padding: 5px 10px;
      background: #86B5D1;
      color: #FFFFFF;
    }
    table td{
      padding: 2px 5px;
      background: #FCFCFC;
      color: #F73BA0;
      font-weight: bold;
    }
    table th:last-child,table td:last-child{
      border-right: 1px solid #143B47;
    }
    table tr:last-child th,table tr:last-child td{
      border-bottom: 1px solid #143B47;
    }
    table tr:first-child :first-child{
      border-top-left-radius: 5px;
    }
    table tr:first-child :last-child{
      border-top-right-radius: 5px;
    }
    table tr:last-child :first-child{
      border-bottom-left-radius: 5px;
    }
    table tr:last-child :last-child{
      border-bottom-right-radius: 5px;
    }    

    .vertical {
        writing-mode: vertical-rl;
        text-align: right;
    }

    .inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    padding: 13px;
    }
    
    --> 
    </style>
    
    
    

{% endblock %}