{{ block title }}
    {{ page_title }}
{{ endblock }}

{{ block content }}

<div class="card shadow-sm">
    <div class="card-body text-center">
        
        <div class="text-start mx-auto" style="max-width: 800px;">
             <div class="alert alert-info mb-4">
                {{ t.practice_p3_alert|safe }}
            </div>

            <p class="mb-2 mt-3"> 
                <label class="form-label small mb-2 d-block">
                    {{ t.practice_p3_intro }}
                </label>
            </p>
            
            <ul class="text-start  mb-4" style="line-height: 1.8;">
                <li>{{ practice_p3_li1|safe }}</li>
                <li>{{ practice_p3_li2|safe }}</li>
                <li>{{ practice_p3_li3|safe }}</li>
            </ul>
        </div>

        <div class="mb-4 mt-2">
            <button class="btn btn-primary btn-sm mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseVisual" aria-expanded="false" aria-controls="collapseVisual">
                <i class="bi bi-image me-1"></i> {{ t.practice_toggle_visual }}
            </button>
            
            <div class="collapse mt-3" id="collapseVisual">
                <h6 class="text-muted text-uppercase small ls-1">{{ t.practice_visual_room }}</h6>
                <img src="{{ static image_path }}" class="img-fluid border rounded" style="max-height: 600px;" />
            </div>
        </div>
        
        <hr class="my-4">

        <div class="alert alert-warning d-inline-block mx-auto mb-4" style="max-width: 700px;">
            <div class="d-flex align-items-center">
                <div class="fs-4 me-3 text-warning">
                    <i class="bi bi-trophy-fill"></i>
                </div>
                <div class="text-start">
                    <strong>{{ t.practice_payment_info_heading }}</strong><br>
                    {{ t.practice_payment_info_body }}
                </div>
            </div>
        </div>

        <p class="lead mb-3">
            {{ practice_belief_prompt_f|safe }}
        </p>

        <div class="d-flex justify-content-center mb-2">
            <div class="input-group" style="max-width: 400px;">
                {{ formfield 'practice_belief' label="" }}
                <span class="input-group-text bg-light">{{ t.practice_out_of_11 }}</span>
            </div>
        </div>
        
        <div class="form-text text-muted mb-4">
            {{ t.practice_enter_0_11 }}
        </div>
        
        <div class="mt-2">
            <button class="btn btn-primary btn-lg px-5">{{ t.practice_submit_prediction }}</button>
        </div>
    </div>
</div>

{{ endblock }}

{{ block scripts }}
{{ endblock }}

{{ block styles }}
<style>
    /* Same styles as Part 2 for consistency */
    .otree-body { max-width: 850px; margin: 40px auto; font-family: 'Inter', system-ui, sans-serif; color: #333; }
    .card-title, .lead { font-size: 1.15rem; font-weight: 600; color: #2c3e50; }
    .form-label { font-size: 1.05rem; color: #000; margin-bottom: 0.75rem; }
    .otree-btn-next, .btn-primary { padding: 10px 35px; border-radius: 25px; font-weight: 600; }
    
    /* Minor styling for the toggle button */
    .btn-outline-secondary { border-radius: 20px; font-weight: 500; }
</style>
{{ endblock }}