{% load otree static %}


    {% ifequal player.role  "buyer" %}
        <p>You<br><span style="color:blue">Buyer B{{ player.value_cost }} </span></p>
        <span style="color:blue; font-size:70px"">{{ player.value_cost }} </span>
        <p style="color:blue;">VALUE <br> <span style="color:black">{% if player.traded%}Already Traded{% else %}Hasn't Traded{% endif %}</span></p>

        <br><hr><br>
        {% for p in other_players %}
            {% if not p.active %}
                {% ifequal p.role player.role %}
                    <p><span style="color:blue">Buyer B{{ p.value_cost }} </span></p>
                    <span style="color:rgba(0,0,255,0.2); font-size:70px"">{{ p.value_cost }} </span>
                    <p style="color:blue;">VALUE
                        <br>
                        <span style="color:gray">{% if p.traded%}Already Traded{% else %}Waiting To Trade{% endif %}</span>
                    </p>
                {% endifequal %}
            {% endif %}
        {% endfor %}

    {% else %}
        <p>You<br><span style="color:red">Seller S{{ player.value_cost }}</span></p>
        <span style="color:red; font-size:70px"> {{ player.value_cost }} </span>
        <p style="color:red;">COST <br> <span style="color:black">{% if player.traded%}Already Traded{% else %}Hasn't Traded{% endif %}</span></p>

        <br><hr><br>
        {% for p in other_players %}
            {% if not p.active %}
                {% ifequal p.role player.role %}
                    <p><span style="color:red">Seller S{{ p.value_cost }} </span></p>
                    <span style="color:rgba(255,0,0,0.20); font-size:70px">{{ p.value_cost }} </span>
                    <p style="color:red;">COST
                    <br>
                    <span style="color:gray">{% if p.traded%}Already Traded{% else %}Waiting To Trade{% endif %}</span>
                    </p>
                {% endifequal %}
            {% endif %}
        {% endfor %}

    {% endifequal %}