{% load otree static %}
{% block content %}
    <div class="card mt-5">
        <div class="card-body">
            <h3 class="card-title">Suitcase Price Estimation Task - Instructions</h3>
            <p class="card-text">
              For this task, screenshots of the following suitcases were taken from Amazon on February 10, 2024. Your task is to estimate the probability that the first suitcase (purple) is more expensive than the second (black).
            </p>
            <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>

            <form method="post">
                <button type="submit" class="btn btn-primary mt-3">Continue</button>
            </form>
        </div>
    </div>
{% endblock %}