{% load otree %}

<div class="shop a">
    <div class="card bg-light instructions">
        <div class="card-body outside">
            <h3 align="center">Shop A</h3>
            <hr>
            <p align="center">Click here to enter Shop A</p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>
        </div>
        <div class="card-body inside">
            <h3 align="center">Shop A</h3>
            <hr>
            {% formfield player.good_a label="How many products do you want to buy in Shop A?" %}
            <button value="True" class="btn btn-secondary btn-large cart" type="button" style="width: 100%">
                Add to cart for
                price {{ Constants.price_high }}</button>
            <button value="True" class="btn btn-primary btn-large buy" style="width: 100%">Buy <span
                    class="amount"></span> for
                price {{ Constants.price_high }}</button>
            <br><br>
            <button value="True" class="btn btn-secondary btn-large cart-cheap" type="button"
                    style="width: 100%">Add to cart for
                price {{ Constants.price_low }}</button>
            <button value="True" class="btn btn-primary btn-large buy-cheap" style="width: 100%">Buy for
                Price {{ Constants.price_low }}</button>
        </div>
    </div>
    <div class="alert alert-success added" role="alert" style="clear:both">
        Number of products added to cart is <span class="amount_msg">Aggrrhhh</span>
    </div>
    <div class="alert alert-danger price" role="alert" style="clear:both">You cannot buy for
        price {{ Constants.price_low }}. The manager of this shop has decided to make this price only available to
        individuals who
        earned {{ Constants.endowment_poor }} in the slider task.
    </div>
    <div class="alert alert-danger budget" role="alert" style="clear:both">Your purchase exceeds
        your
        budget
    </div>
</div>
<div class="shop b">
    <div class="card bg-light instructions">
        <div class="card-body outside">
            <h3 align="center">Shop B</h3>
            <hr>
            <p align="center">Click here to enter Shop B</p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>
        </div>
        <div class="card-body inside">
            <h3 align="center">Shop B</h3>
            <hr>
            {% formfield player.good_b label="How many products do you want to buy in Shop B?" %}
            <button value="True" class="btn btn-secondary btn-large cart" type="button" style="width: 100%">
                Add to cart for
                price {{ Constants.price_high }}</button>
            <button value="True" class="btn btn-primary btn-large buy" style="width: 100%">Buy <span
                    class="amount"></span> for
                price {{ Constants.price_high }}</button>
            <br><br>
            <button value="True" class="btn btn-secondary btn-large cart-cheap" type="button"
                    style="width: 100%">Add to cart for
                price {{ Constants.price_low }}</button>
            <button value="True" class="btn btn-primary btn-large buy-cheap" style="width: 100%">Buy for
                Price {{ Constants.price_low }}</button>
        </div>
    </div>
    <div class="alert alert-success added" role="alert" style="clear:both">
        Number of products added to cart is <span class="amount_msg"></span>
    </div>
    <div class="alert alert-danger price" role="alert" style="clear:both">You cannot buy for
        price {{ Constants.price_low }}. The manager of this shop has decided to make this price only available to
        individuals who
        earned {{ Constants.endowment_poor }} in the slider task.
    </div>
    <div class="alert alert-danger budget" role="alert" style="clear:both">Your purchase exceeds
        your
        budget
    </div>
</div>

<div width="100%" style="clear:both">
    <button style="clear:both" id="cart_outside" name="cart_outside" value="True"
            class="btn btn-secondary btn-large" type="button">Outside Cart
    </button>
    <button style="clear:both" id="buy_outside" name="buy_outside" value="True" class="btn btn-primary btn-large">
        Outside Buy
    </button>
</div>