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

{% block title %}
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'platform_demo/styles/page.css' %}">
    <style>
      .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    </style>
{% endblock %}

{% block content %}
{% if form.errors %}
<div class="alert alert-danger" role="alert">
    <h4 class="alert-heading">Please move the slider to make your bid.</h4>
    <p>A little improvement may be enough to settle the case.</p>
</div>
{% endif %}

{% block bid_input %}
{% endblock %}

<div class="page">
    <div class="top">
        <h2 style="text-align: center;">
            {% block bid_title %}
            {% endblock %}
        </h2>
        <br>
        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    {% block bid_background %}
                    {% endblock %}
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
    <div class="middle">
        <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8" style="text-align: center;">
                    {% block bid_move %}
                    {% endblock %}
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row" style="height: 120px;">
                <div class="col-md-2" style="text-align: right; top: 30px;">
                    <font size="-1"> {{player.first_bid_agent}}</font>
                </div>
                <div class="col-md-8">
                    {% block bid_cake %}
                    {% endblock %}
                </div>
                <div class="col-md-2" style="text-align: left; top: 30px;">
                    <font size="-1"> {{player.first_bid_principal}}</font>
                </div>
            </div>
            <div class="row" style="height: 50px;">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    {% block bid_value_visible %}
                    {% endblock %}
                </div>
                <div class="col-md-4">
                    {% block bid_value_secret %}
                    {% endblock %}
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4" style="text-align: left;">
                    {% block button_submit %}
                    {% endblock %}
                </div>
                <div class="col-md-4" style="text-align: right;">
                    Your moves marked by <span class="dot_agent"></span><br>
                    {{player.background_principal}}'s moves marked by <span class="dot_principal"></span>
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script type="application/javascript" src="{% static 'platform_demo/styles/cake.js' %}"></script>
    <script src="{% static 'platform_demo/scripts/ready_function.js' %}"></script>
    <script src="{% static 'platform_demo/scripts/slider.js' %}"></script>
{% endblock %}