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

{{ block content }}

<div class="alert alert-info shadow-sm">
    <i class="bi bi-info-circle-fill"></i> 
    {{ t.practice_alert|safe }}
</div>

<div class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ t.practice_q1_heading }}</h5>
        
        <label class="form-label small mb-3">
            {{ t.practice_q1_help|safe }}
        </label>

        <div class="card-title mb-3">
            {{ formfield 'practice_opinion' label="" }}
        </div>
    </div>
</div>

<div class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ practice_q2_heading_f }}</h5>

        <label class="form-label small mb-3">
            {{ practice_q2_help_f|safe }}
        </label>
        <div class="card-title mb-3">
            {{ formfield 'practice_punish' label="" }}
        </div>
    </div>
</div>

<div class="d-flex justify-content-end mt-4">
    {{ next_button label=t.btn_next }}
</div>

{{ endblock }}

{{ block styles }}
<style>
    /* Global Container */
    .otree-body {
        max-width: 800px;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        color: #333;
    }
    .card {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background-color: #fff;
    }
    .card-title {
        font-size: 1.15rem;
        font-weight: 600;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 15px;
        color: #2c3e50;
    }
    .form-label {
        font-size: 1.05rem;
        color: #000;
    }
    .btn-primary {
        padding: 10px 30px;
        font-weight: 600;
        border-radius: 4px;
    }
</style>
{{ endblock }}