{{ block title }}
    結果画面
{{ endblock }}

{{ block content }}
<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tabs" checked="checked">
    <label class="tab-label" for="TAB-01">実験画面</label>
    <div class="tab-content">

    <table class="table">
        <br><br>
        <td>あなたの役割</td>
        <th>
            {{ if player.is_buyer }}企業{{ else }}労働者{{ endif }}
        </th>      

    </table>
    <br><br>
    <table class="table">
            <tr>            
                <td>取引価格</td>
                <th>{{ player.prices }}</th>
                <td>合計金額</td>
                <th>{{ player.money }}</th>
            </tr>    
    </table>
    <br><br>

    {{ if player.is_buyer }}        
    <table class="table">
        <tr>
            <td>生産量</td>
            <th>{{ player.num_items }}</th>       
            <td>生産性</td>
            <th>{{ player.break_even_point }}</th>
                 
        </tr>
    </table>
    {{ else }}
     <table class="table">
            <tr>
                <td>非労働所得</td>
                <th>{{ player.endowment }}</th>            
                <td>所得</td>
                <th>{{ player.money }}</th>                      
            </tr>
            <tr>
            <td></td>
            <td></td>
            <td>基礎控除</td>
            <th>{{ group.Income }} </th>                                
            </tr>
            
            <tr>
                <td></td>
                <td></td>
                <td>税率</td>
                <th>{{ group.Tax }}</th>
            </tr>

            <tr>
                <td></td>
                <td></td>
                <td>課税額</td>
                <th>{{ player.payment_tax }}</th>
            </tr>
    </table>

    <br><br>
    <table class="table">
            <tr>
                <td>余暇</td>
                <th>{{ player.num_items }}</th>
                <td>余暇価値</td>
                <th>{{ player.break_even_point }}</th>
            </tr>
            <tr>
                <td>余暇　×　余暇価値</td>
                <th>＝ </th>
                <td>{{ player.utility_leisure}}</td>
            </tr>
    </table>
        
        {{ endif }}

        </table>
        

        
    </table>
    
    <br><br>

    <table class="table">
        <tr>
            <th>このラウンドの結果</th>
            <th>{{ player.current_result }} </th>
            {{ if player.is_buyer }}
            <td>  　　=   　1000 　+ 　{{ player.num_items }} 　×　{{ player.break_even_point }} 　- 　{{ player.money }}  </td>
            {{ elif player.payment_tax < 0.0}}
            <td>　　=　{{ player.money }} 　+　{{ player.num_items }} 　×　{{ player.break_even_point }}</td>                        
            {{ else }}
            <td>　　=　{{ player.money }}　ー　{{ player.payment_tax}}　+　{{ player.utility_leisure}}</td>                        
            {{ endif }}
            
        </tr>
    
    </table>    
    <br><br>

{{ include 'double_auction/chart.html' }}
    
<script>
let my_id = js_vars.id_in_group;

function cu(amount) {
    return `${amount} `;
}

function liveRecv(data) {
    console.log(data)     
    // javascript destructuring assignment
    let { highcharts_series,bids_dict,asks_dict,current_offer} = data;    
    redrawChart(highcharts_series);// グラフの更新 
    
}

document.addEventListener('DOMContentLoaded', (event) => {
    liveSend({'offer_frag':false});
});

</script>

{{next_button}}
<style>
    .otree-body {
     max-width:1100px
    }
    .tab-wrap {
     display:flex;
     flex-wrap:wrap;
    }
    .tab-label {
     color:White;
     background:#d4dcda;
     margin-right:5px;
     padding:3px 12px;
     order: -1;
    }
    .tab-content {
     width: 100%;
     display: none;
    }
    .tabs:checked+ .tab-label {
     background: #89c3ed;
    }
    .tabs:checked+ .tab-label+ .tab-content {
     display: block;
    }
    .tabs {
     display: none;
    }
</style>

<style type="text/css">
    .table-css {
     border-collapse; collapse;
    }
    .border_lowzero {
     border: 1px solid black;
    }
    .border_topzero {
     border: 1px solid black;
     border-top-style:none;
    }
    .border_kakou {
    border: 1px solid black;
   }
</style>
</div>

 <input id="TAB-02" type="radio" name="TAB" class="tabs">
 <label class="tab-label" for="TAB-02">インストラクション</label>

<div class="tab-content">
    <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSjLVojRl8ylyTgb4-MC_zvB9mCZubOgFQ4f0N0CaPvfHH2JLreWTtc1wQ5She1rJBzzZA1dvhGOiub/embed?start=false&loop=false&delayms=3000" frameborder="0" width="1080" height="636" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</div>
</div>




{{ endblock }}