{% extends "platform_demo/bid_template.html" %}
{% load otree static %}


{% block bid_input %}
    {% if visibility == "visible" %}
        <input type="hidden" name="visible_bid" id="visible_bid">
        <input type="hidden" name="visible_cut" id="visible_cut">
    {% elif visibility == "secret" %}
        <input type="hidden" name="secret_bid" id="secret_bid">
        <input type="hidden" name="secret_cut" id="secret_cut">
    {% endif %}
{% endblock %}


{% block bid_title %}
    {% if player.round_number == 1 %}
        This is the first round of the dispute resolution procedure
    {% elif player.round_number == 2 %}
        This is the second round of the dispute resolution procedure
    {% elif player.round_number == 3 %}
        This is the third round of the dispute resolution procedure
    {% endif %}
{% endblock %}


{% block bid_background %}
    {% if player.round_number == 1 %}
        <ul style="text-align: left;">
            <li>
                {{player.background_principal}}'s initial claim: {{player.first_bid_principal}}
            </li>
            <li>
                    Your initial offer: {{player.first_bid_agent}}
            </li>
            <li>
                <u>A gap of {{group.visible_spectrum}} needs to be resolved</u>
            </li>
        </ul>
    {% else %}
        <ul style="text-align: left;">
            <li>
                {{player.background_principal}}'s last claim: {{last_principal_bid}}
            </li>
            <li>
                    Your last offer: {{last_agent_bid}}
            </li>
            <li>
                <u>A gap of {{group.visible_spectrum}} still needs to be resolved.</u>
            </li>
        </ul>
    {% endif %}
{% endblock %}


{% block bid_move %}
    {% if player.round_number == 1 and visibility == "visible" %}
        Please move the slider to make your first
        <abbr title="visible offers are legally binding and visible to the other party">visible offer</abbr>
    {% elif player.round_number == 1 and visibility == "secret" %}
        Please move the slider to make your first
        <abbr title="invisible offers are not legally binding and invisible to the other party,
            only used for our algorithm to suggest a settlement">invisible offer</abbr>
    {% elif player.round_number == 2 and visibility == "visible" %}
        Please move the slider to make your second
        <abbr title="visible offers are legally binding and visible to the other party">visible offer</abbr>
    {% elif player.round_number == 2 and visibility == "secret" %}
        Please move the slider to make your second
        <abbr title="invisible offers are not legally binding and invisible to the other party,
            only used for our algorithm to suggest a settlement">invisible offer</abbr>
    {% elif player.round_number == 3 and visibility == "visible" %}
        Please move the slider to make your third
        <abbr title="visible offers are legally binding and visible to the other party">visible offer</abbr>
    {% elif player.round_number == 3 and visibility == "secret" %}
        Please move the slider to make your third
        <abbr title="invisible offers are not legally binding and invisible to the other party,
            only used for our algorithm to suggest a settlement">invisible offer</abbr>
    {% endif %}
{% endblock %}

{% block bid_cake %}
    <div class="container_cake">
        <canvas id="canvas" width="620" height="50"></canvas>
        <div class="rectangle_agent_transparent" id="rectangle_transparent"></div>
        <div class="rectangle_agent_not_transparent" id="rectangle_not_transparent"></div>
        <div class="rectangle_principal_not_transparent" id="rectangle_not_transparent_opponent"></div>
        {% if player.round_number == 1 and visibility == "visible" %}
            <div class="slim_rectangle_agent" id="slim_visible"></div>
            <div class="container_slider" id="container_slider_visible">
                <input type="range" min="0" max= {{cake_width}} value="0" class="slider_agent" id="slider">
            </div>
        {% elif player.round_number == 1 and visibility == "secret" %}
            <div class="slim_rectangle_agent" id="slim_secret"></div>
            <div class="container_slider" id="container_slider_secret">
                <input type="range" min= {{player.visible_cut}} max= {{cake_width}} value= {{player.visible_cut}} class="slider_agent" id="slider" >
            </div>
        {% elif player.round_number > 1 and visibility == "visible" %}
            <div class="slim_rectangle_agent" id="slim_visible"></div>
            <div class="container_slider" id="container_slider_visible">
                <input type="range" min= {{last_agent_cut}} max= {{last_principal_cut}} value={{last_agent_cut}} class="slider_agent" id="slider" >
            </div>
        {% elif player.round_number > 1 and visibility == "secret" %}
            <div class="slim_rectangle_agent" id="slim_secret"></div>
            <div class="container_slider" id="container_slider_secret">
                <input type="range" min= {{player.visible_cut}} max= {{last_principal_cut}} value= {{player.visible_cut}} class="slider_agent" id="slider" >
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block bid_value_visible %}
    {% if player.round_number == 1%}
        Value of your 1st visible offer: <span id="value_visible"></span>
    {% elif player.round_number == 2 %}
        Value of your 2nd visible offer: <span id="value_visible"></span>
    {% elif player.round_number == 3 %}
        Value of your 3rd visible offer: <span id="value_visible"></span>
    {% endif %}
{% endblock %}

{% block bid_value_secret %}
    {% if player.round_number == 1 and visibility == "secret" %}
        Value of your 1st invisible offer: <span id="value_secret"></span>
    {% elif player.round_number == 2 and visibility == "secret" %}
        Value of your 2nd invisible offer: <span id="value_secret"></span>
    {% elif player.round_number == 3 and visibility == "secret" %}
        Value of your 3rd invisible offer: <span id="value_secret"></span>
    {% endif %}
{% endblock %}

{% block button_submit %}
    <button type="submit" class="btn btn-primary" style="background: green;">bid</button>
{% endblock %}