{% load otree static %}

{% block content %}
    <div class="card mt-5">
        <div class="card-body">
            <h3 class="card-title">Evaluate the Suitcases' Price</h3>
               <div class="text-center mt-3 mb-3">
                <img src="{% static 'images/suitcase_e.png' %}" alt="Blue Suitcase" class="img-fluid" style="max-width: 700px;">
                <img src="{% static 'images/suitcase_o.png' %}" alt="Purple Suitcase" class="img-fluid" style="max-width: 700px;">
            </div>

            <p class="card-text">
                Please answer the following question.
            </p>
            <form method="post">
                {% formfield player.perceived_probability_suitcase_ante %}
                <button type="submit" class="btn btn-primary mt-3">
                    Continue
                </button>
            </form>
        </div>
    </div>
{% endblock %}