{% load otree %}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="eggs-img-container">
                <img src="{% static 'img/eggs.jpg' %}" alt="Eggs" class="img-fluid">
            </div>

            <p>John usually pays attention to whether his eggs are free-range or not. We are going to give him a present: <strong>a carton of eggs</strong>.</p>

            <p>Here is the twist: we have two cartons of eggs—one with <strong>free-range eggs</strong> and one with <strong>conventional (caged) eggs</strong>.
            The eggs are identical in appearance, taste, and quality. The only differences are the living conditions of the hens.</p>

            <p>John will receive one carton of eggs—either the free-range ones or the conventional (caged) ones.
                Your choice does not affect the hens or the farms—the eggs have already been purchased.
                    We will discard the carton that we do not give to John.</p>

            <div class="text-center">
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
                        aria-expanded="false" aria-controls="collapseExample" id="AdditionalInstructions">
                    Read more
                </button>
            </div>
            <div class="collapse" id="collapseExample">
                <div class="card card-body mt-2">
                    <p><strong>John cannot tell which eggs are free-range and which are conventional unless we tell him.</strong>
                    It is impossible to distinguish between them by appearance or taste, even for experts.</p>

                    <p><strong>John has agreed to all of this.</strong> For example, he knows that the carton he receives may contain the free-range eggs or the caged eggs.</p>

                    <p>When you are ready, click "Next."</p>
                    <div class="text-end"><button class="btn btn-primary btn-large">Next</button></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .eggs-img-container { float: right; width: 200px; margin: 0 0 10px 15px; }
</style>

<script>
    document.getElementById("AdditionalInstructions").addEventListener("click", function() {
        this.style.display = "none";
    });
</script>