{{ block title }}
    {{ t.gi_title }}
{{ endblock }}

{{ block content }}

<div class="card shadow-sm">
    <div class="card-body">
        
        <h3 class="card-title text-primary mb-4">{{ t.gi_welcome_heading }}</h3>
        <p>
            {{ t.gi_welcome_p1 }}
        </p>
        <p>
            {{ t.gi_welcome_p2|safe }}
        </p>
        <div class="  d-flex align-items-center mb-4" >
    
    <p>
        {{ t.gi_welcome_p3|safe }}
    </p>
</div>
        

        <h5 class="text-primary mb-3">{{ t.gi_overview_heading }}</h5>
        <div class="row g-3">
            <div class="col-md-4">
                <div class="card h-100 bg-light border-0">
                    <div class="card-body">
                        <h6 class="fw-bold text-dark">{{ t.gi_ov_p1_title }}</h6>
                        <p class="small text-muted mb-0">
                            {{ t.gi_ov_p1_text }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 bg-light border-0">
                    <div class="card-body">
                        <h6 class="fw-bold text-dark">{{ t.gi_ov_p2_title }}</h6>
                        <p class="small text-muted mb-0">
                            {{ t.gi_ov_p2_text }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 bg-light border-0">
                    <div class="card-body">
                        <h6 class="fw-bold text-dark">{{ t.gi_ov_p3_title }}</h6>
                        <p class="small text-muted mb-0">
                            {{ t.gi_ov_p3_text }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        

        <h5 class="text-primary">{{ t.gi_detail_heading }}</h5>



        <div class="mb-5">

            <h6 class="fw-bold">{{ t.gi_p1_heading }}</h6>
            <p>
            {{ t.gi_p1_intro }}
            </p>
            
            <p>
                {{ t.gi_p1_q1|safe }}
            </p>
            <p>
                {{ t.gi_p1_q2|safe }}

            </p>

        </div>



        <div class="mb-5">

            <h6 class="fw-bold">{{ t.gi_p2_heading }}</h6>

<p>
    {{ t.gi_p2_p1 }}
</p>
<p>{{ t.gi_p2_p2 }}</p>
<p>{{ t.gi_p2_p3 }}</p>

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

        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="example_opinion" id="opt_coffee" data-selected="{{ t.gi_example_coffee }}" data-other="{{ t.gi_example_tea }}" onclick="updateScenarioFrom(this)">
                <label class="form-check-label" for="opt_coffee">
                    {{ t.gi_example_coffee }}
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="example_opinion" id="opt_tea" data-selected="{{ t.gi_example_tea }}" data-other="{{ t.gi_example_coffee }}" onclick="updateScenarioFrom(this)">
                <label class="form-check-label" for="opt_tea">
                    {{ t.gi_example_tea }}
                </label>
            </div>
        </div>
    </div>
</div>

<div id="scenario-card" class="card mb-4 shadow-sm" style="display:none;">
    <div class="card-body">
        <h5 class="card-title mb-3">
            {{ t.gi_scenario_title }}
        </h5>

        <label class="form-label small mb-3">
            {{ t.gi_scenario_intro|safe }}
        </label>
        
        <div class="card-text">
            <ul class="list-unstyled mb-0">
                <li class="mb-3">
                    <span class="badge bg-primary rounded-pill me-2">1</span> 
                    {{ t.gi_scenario_li1|safe }}
                </li>

                <li class="mb-3">
                    <span class="badge bg-primary rounded-pill me-2">2</span> 
                    {{ t.gi_scenario_li2|safe }}
                </li>

                <li class="mb-3">
                    <span class="badge bg-primary rounded-pill me-2">3</span> 
                    {{ t.gi_scenario_li3|safe }}
                </li>

                <li class="mb-3">
                    <span class="badge bg-primary rounded-pill me-2">4</span> 
                    {{ t.gi_scenario_li4|safe }}
                </li>
            </ul>
        </div>
    </div>
</div>



            <p>

                {{ t.gi_p2_after|safe }}

            </p>

           

            <div class="card border-danger mb-3">

                <div class="card-header bg-danger text-white small text-uppercase fw-bold">

                    {{ t.gi_erase_heading }}

                </div>

                <div class="card-body bg-light">

                    <p class="card-text">

                        {{ t.gi_erase_p }}

                    </p>

                    <ul>

                        <li>{{ t.gi_erase_li|safe }}</li>

                    </ul>

                </div>

            </div>

        </div>



        <div class="mb-5">

            <h6 class="fw-bold">{{ t.gi_p3_heading }}</h6>

            <p>

                {{ t.gi_p3_p1 }}

            </p>

            <p>

                    {{ t.gi_p3_p2|safe }}

            </p>


        </div>

        <hr class="my-5">


        <h5 class="text-primary mt-5">{{ t.gi_pay_heading }}</h5>
        <table class="table table-bordered text-center align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 30%;">{{ t.gi_pay_th_event }}</th>
                    <th>{{ t.gi_pay_th_consequence }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-start fw-bold text-secondary">{{ t.gi_pay_row1_event }}</td>
                    <td class="text-start">{{ t.gi_pay_row1_text|safe }}</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold text-secondary">{{ t.gi_pay_row2_event }}</td>
                    <td class="text-start">{{ t.gi_pay_row2_text|safe }}</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold text-secondary">{{ t.gi_pay_row3_event }}</td>
                    <td class="text-start">{{ t.gi_pay_row3_text|safe }}</td>
                </tr>
                <tr>
                    <td class="text-start fw-bold text-secondary">{{ t.gi_pay_row4_event }}</td>
                    <td class="text-start">{{ t.gi_pay_row4_text|safe }}</td>
                </tr>
            </tbody>
        </table>

        <hr class="my-5">

        <p>
            {{ t.gi_practice_note }}
        </p>

    </div>
</div>

<div class="mt-5 d-flex justify-content-end">
    {{ next_button label=t.gi_next_practice }}
</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;
    }

    /* Unified Card Styling */
    .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;
    }

    /* Typography consistency */
    .form-label {
        font-size: 1.05rem;
        color: #000;
        display: block; /* Ensures label behaves like a block element */
    }

    .text-secondary {
        color: #6c757d !important;
        line-height: 1.5;
    }
    
    /* Simulate oTree/Bootstrap Radio spacing */
    .form-check {
        margin-bottom: 0.5rem;
        padding-left: 1.75rem;
    }
    
    .form-check-input {
        cursor: pointer;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    function updateScenarioFrom(el) {
        updateScenario(el.dataset.selected, el.dataset.other);
    }
    function updateScenario(selected, other) {
        var majority = selected;
        var minority = other;

        var userSpans = document.querySelectorAll('.user-choice');
        userSpans.forEach(function(el) { el.textContent = selected; });

        var majSpans = document.querySelectorAll('.majority-group');
        majSpans.forEach(function(el) { el.textContent = majority.toLowerCase(); });

        var minSpans = document.querySelectorAll('.minority-group');
        minSpans.forEach(function(el) { el.textContent = minority.toLowerCase(); });

        var card = document.getElementById('scenario-card');
        if (card.style.display === 'none') {
            card.style.display = 'block';
            card.style.opacity = 0;
            var fadeEffect = setInterval(function () {
                if (!card.style.opacity) { card.style.opacity = 0; }
                if (card.style.opacity < 1) {
                    card.style.opacity = parseFloat(card.style.opacity) + 0.1;
                } else {
                    clearInterval(fadeEffect);
                }
            }, 30);
        }
    }
</script>
{{ endblock }}