{% load otree static %}


    {% ifequal player.role  "buyer" %}
        <p>Counterpart<br><span style='color:red' >Seller S{{ part_value_cost }}</span></p>
        <span style="color:red; font-size:70px"">{{ part_value_cost }} </span>
        <p style="color:red;">COST
        <br>
        {% for p in other_players %}
            {% if p.active %}
                {% ifnotequal p.role player.role %}
                    <span style="color:black">{% if p.traded%}Already Traded{% else %}Hasn't Traded{% endif %}</span>
                {% endifnotequal %}
            {% endif %}
        {% endfor %}
        </p>

        <br><hr><br>
        {% for p in other_players %}
            {% if not p.active %}
                {% ifnotequal 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;">VALUE
                    <br>
                    <span style="color:gray">{% if p.traded%}Already Traded{% else %}Waiting To Trade{% endif %}</span>
                    </p>
                {% endifnotequal %}
            {% endif %}
        {% endfor %}

    {% else %}
        <p>Counterpart<br><span style="color:blue" >Buyer B{{ part_value_cost }}</span> </p>
        <span style="color:blue; font-size:70px"> {{ part_value_cost }} </span>
        <p style="color:blue;">VALUE
        <br>
        {% for p in other_players %}
            {% if p.active %}
                {% ifnotequal p.role player.role %}
                    <span style="color:black">{% if p.traded%}Already Traded{% else %}Hasn't Traded{% endif %}</span>
                {% endifnotequal %}
            {% endif %}
        {% endfor %}
        </p>

        <br><hr><br>
        {% for p in other_players %}
            {% if not p.active %}
                {% ifnotequal 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>
                {% endifnotequal %}
            {% endif %}
        {% endfor %}

    {% endifequal %}