{% load otree %}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="image-container">
                <img src="{% static 'img/catfishing_1.png' %}" alt="$100 charity donation" class="img-fluid"
                     onerror="this.onerror=null; this.outerHTML='<div class=&quot;img-placeholder-single&quot;>💝 $100 charity donation</div>';">
            </div>

            <p>John likes the content of online creators, such as those on OnlyFans. He will have <strong>a 1-hour chat conversation</strong> with a creator he really likes.</p>

            <div class="alert alert-info py-2 small" style="overflow: hidden;">
                <strong>Info:</strong> <a href="https://en.wikipedia.org/wiki/OnlyFans" target="_blank">OnlyFans</a> is an online subscription platform where creators share exclusive content with paying followers and can interact with them through messages and live chats.
            </div>

            <p>Here is the twist: we have arranged two possible chat partners—one is the <strong>real female creator</strong>
            and the other is an <strong>AI creator</strong> that perfectly mimics the creator's personality and style.</p>

            <p>John will engage in one chat conversation—either with the real creator or with the AI creator.
                If John chats with the AI creator, the real creator will be paid the same regardless.</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 whether he is chatting with the real creator or the AI creator unless we tell him.</strong>
                    The conversation is text-only—no media (photos, videos, or voice messages) can be exchanged.</p>

                    <p><strong>John has agreed to all of this.</strong> For example, he knows that his chat partner may be the real creator or the AI creator.</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>
    .image-container { float: right; width: 35%; margin: 0 0 10px 10px; }
    .app-image { width: 49%; padding: 0 0 10px 10px; }
    .img-placeholder { width: 49%; padding: 10px; display: inline-flex; align-items: center; justify-content: center; height: 120px; border: 2px dashed #999; font-size: 0.85rem; box-sizing: border-box; float: left; }
    .img-placeholder.green { background: #d4edda; border-color: #28a745; color: #155724; }
    .img-placeholder.red { background: #f8d7da; border-color: #dc3545; color: #721c24; }
</style>

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