{% load otree static %}


    {% for p in other_players %}
        <div class="col-2">

            {% ifequal p.role  "buyer" %}


                <p><span style="color:blue">Buyer B{{ p.value_cost }}{% ifequal p.id_in_group  player.id_in_group %} (YOU){% endifequal %}</span></p>
            <p style="color:blue;">Value </p>
{#                <span style="color:blue; font-size:70px">{{ p.value_cost }} </span>#}
                <span style="color:{% if p.active%}blue{% else %}rgba(0,0,255,0.20){% endif %}; font-size:70px">{{ p.value_cost }} </span>

                <p>
                {% if p.active %}
                    {% if p.traded%} <span style="color:black; font-weight:bold"> ALREADY TRADED{% else %} <span style="color:black"> Negotiating{% endif %}</span>
                {% else %}
                    {% if p.traded%} <span style="color:black; font-weight:bold"> ALREADY TRADED{% else %} <span style="color:black">Waiting{% endif %}</span>
                {% endif %}
                </p>

            {% else %}


                <p><span style="color:red">Seller S{{ p.value_cost }}{% ifequal p.id_in_group  player.id_in_group %} (YOU){% endifequal %} </span></p>
            <p style="color:red;">Cost </p>
{#                  <span style="color:red; font-size:70px">{{ p.value_cost }} </span>#}
                    <span style="color:{% if p.active%}red{% else %}rgba(255,0,0,0.20){% endif %}; font-size:70px">{{ p.value_cost }} </span>
                <p>
                {% if p.active %}
                    {% if p.traded%} <span style="color:black; font-weight:bold"> ALREADY TRADED{% else %} <span style="color:black">Negotiating{% endif %}</span>
                {% else %}
                    {% if p.traded%} <span style="color:black; font-weight:bold"> ALREADY TRADED{% else %} <span style="color:black">Waiting{% endif %}</span>
                {% endif %}
                </p>
             {% endifequal %}

        </div>
    {% endfor %}
    <div class="col-4">

        <div style="text-align:center;">
        <h6>Round {{ subsession.period }} of Market {{ session.vars.current_market }}</h6>
            {% ifequal player.role  "buyer" %}
                <h6>You are buyer <span style='color:blue' >B{{ player.value_cost }}</span>.</h6>
            {% else %}
                <h6>You are seller <span style="color:red" >S{{ player.value_cost }}</span>.</h6>
            {% endifequal %}


        </div>
    </div>

    </div>