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

{% block title %}
    Game {{ game }} – Node {{ game_node }}
{% endblock %}

{% block content %}
<h3> Make Your Move!</h3>

<!-- Player's color info -->
<div class="card my-5">
    {% if player.id_in_group == 1 %}
    <div class="card-header">You are the <font style="color:red;">RED</font> player</div>
    {% else %}
    <div class="card-header">You are the <font style="color:blue;">BLUE</font> player</div>
    {% endif %}
</div>

<!-- Opponent's decision -->
{% if game_node > 1 %}
<div class="card my-5">
    <div class="card-header">Your opponent decided to pass</div>
</div>
{% endif %}

<div class="card my-3">
    <div class="card-body">

        <!-- Piles -->
        <p class="card-text">The Large Pile is: {{ large_pile }}</p>
        <p class="card-text">The Small Pile is: {{ small_pile }}</p>

        <br>

        <!-- Decision -->
        <p>Do you want to take the Large Pile?</p>

        <!--Buttons-->
        <div class="btn-div">
        <label id="take-label" class="btn btn-outline-primary">
            <input id="take" type="submit" name="take" value="True" style="display: none;" required >Take
        </label>
        <label id="pass-label" class="btn btn-outline-primary">
            <input id="pass" type="submit" name="take" value="False" style="display: none;" required>Pass
        </label>
        </div>
  </div>
</div>

{% endblock %}