{{ 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_p2_alert|safe }}
            </div>

            <p class="mb-3 mt-3">
                <label class="form-label small mb-3">
                {{ practice_p2_p1|safe }}
                </label>
            </p>

            <p class="mb-3">
                <label class="form-label small mb-3">
                {{ practice_p2_p2|safe }}
                </label>
            </p>
        </div>

        <div class="mb-4 mt-4">
            <h6 class="text-muted text-uppercase small ls-1">{{ t.practice_visual_heading }}</h6>
            <img src="{{ static image_path }}" class="img-fluid border rounded visual-representation" style="max-height: 600px;" />
        </div>

        <hr class="my-4">

        <p class="lead mb-3">
            {{ t.practice_decision_prompt }}
        </p>

        <div class="d-flex justify-content-center mb-4">
            <div class="decision-input-wrapper">
                {{ formfield 'practice_expressed' label="" }}
            </div>
        </div>
        
        <div class="mt-4">
            <button class="btn btn-primary btn-lg px-5 text-none">{{ t.practice_submit_decision }}</button>
        </div>
    </div>
</div>

{{ endblock }}

{{ block styles }}
<style>
    .otree-body {
        max-width: 850px;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        color: #333;
        line-height: 1.6;
    }
    .card-title, .lead {
        font-size: 1.15rem;
        font-weight: 600;
        color: #2c3e50;
    }
    .form-label {
        font-size: 1.05rem;
        color: #000;
        margin-bottom: 0.75rem;
    }
    .decision-input-wrapper {
        background-color: #f8f9fa; 
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px 40px;
        min-width: 350px;
        text-align: left;
    }
    .visual-representation {
        border-radius: 12px;
        border: 1px solid #dee2e6;
        margin-top: 1rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .otree-btn-next, .btn-primary {
        padding: 10px 35px;
        border-radius: 25px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
    .btn {
    text-transform: none !important;
}
</style>
{{ endblock }}