{{ block title }}
    {{ include_sibling 'block_Header.html' }}
    Ihre Erwartungen über die Beförderungsentscheidungen und Lohnangebote
    des Arbeitgebers aus der Farbgruppe {{ exp_emp.color_html }} für seine aktuellen Arbeitnehmer
{{ endblock }}
{{ block content }}
Einer der anderen Arbeitgeber auf Ihrem Arbeitsmarkt gehört zur Farbgruppe {{ exp_emp.color_html }}.
Einer seiner aktuellen Arbeitnehmer gehört zu{{ if others.worker1.same_color }} seiner{{ else }}r{{ endif }}
Farbgruppe {{ others.worker1.color_html }}. Der andere gehört zu{{ if others.worker2.same_color }} seiner{{ else }}r{{ endif }}
Farbgruppe {{ others.worker2.color_html }}.
Geben Sie in den Eingabefeldern an, welche Beförderungsentscheidungen und Lohnangebote Sie vom Arbeitgeber aus der Farbgruppe
{{ exp_emp.color_html }} für seine Arbeitnehmer erwarten.
Für jede richtige Erwartung bekommen Sie {{ C.BONUS_EXP }}
Taler. Bei den Lohnangeboten zählt eine Erwartung als richtig wenn sie in einem Bereich von +/- {{ C.TOLERANCE_EXP }} um
den tatsächlichen Wert liegt.

<p>
<style>
    .table {
        width: 100%;
        border: 2px;
        border-style: solid none solid none;
    }
    .table th {
        vertical-align: middle;
        padding: 0;
        margin: 0;
    }
    .table td {
        vertical-align: middle;
        padding: 0;
        margin: 0;
    }
    .col-form-label  {
        display: none;
    }
    .mb-3 {
        margin-bottom: 0 !important;
    }  
</style>


    <table class="table">
        <tr>
            <th style="width: 6%; border-style:none;"></th>
            <th style="width: 27%; border-style:none;"></th>
            <th style="width: 11%; border-style:none;"></th>
            <th style="width: 3%; border-style:none;"></th>
            <th style="width: 16%; border-style:none;"></th>
            <th style="width: 16%; border-style:none;"></th>
            <th style="width: 14%; border-style:none;"></th>
            <th style="width: 6%; border-style:none;"></th>
        </tr>
        {{ for case in cases }}
        <tr>
            <th rowspan="2" style="font-size: large;">Fall {{ case.case_number }}:</th>
            <td style="height: 10px;">Der {{ case.worker1.role_html }} aus {{ if case.worker1.color_id == exp_emp.color_id }}Seiner{{ else }}der{{ endif }} 
                Farbgruppe {{ case.worker1.color_html }}</br>hat <b>{{ case.worker1_ability }}</b> Leistungsfähigkeit</td>
            <td rowspan="2">Ich erwarte,</br>dass der {{ exp_emp.role_html }}</br>aus der Farb-</br>gruppe {{ exp_emp.color_html }}</td>
            <td rowspan="2"><span class="brackets"><img src="{{ static 'BraceLeft.png' }}" width="25px"/></span></td>
            <td>... den {{ case.worker1.role_html }} aus der</br>Farbgruppe {{ case.worker1.color_html }}</td>
            <td>{{ formfield case.promotione }}</td><td>... und ihm einen</br>Lohn bietet von</td><td>{{ formfield case.offer1e }}</td>
        </tr>
        <tr>
            <td>Der {{ case.worker2.role_html }} aus {{ if case.worker2.color_id == exp_emp.color_id }}Seiner{{ else }}der{{ endif }} 
                Farbgruppe {{ case.worker2.color_html }}</br>hat <b>{{ case.worker2_ability }}</b> Leistungsfähigkeit</td>
            </td><td>... den {{ case.worker2.role_html }} aus der</br>Farbgruppe {{ case.worker2.color_html }}</td>
            <td>{{ formfield case.promotione_inv }}</td><td>... und ihm einen</br>Lohn bietet von</td><td>{{ formfield case.offer2e }}</td>
        </tr>
        {{endfor }}
    </table>

</p>

<script>
    $(document).ready(function(){
        for (var i = 0; i < document.getElementsByTagName("input").length; i++) {
            if ((el = document.getElementsByTagName("input")[i]).type == "radio") {
                el.onchange = function (here) {
                    sid = here.target.id;
                    tid = sid.substr(0, 14) + "inv-" + (1-parseInt(sid.substr(-1, 1)));
                    if (sid.includes("inv")) {
                        tid = tid.replace("inv", "");
                    }
                    document.getElementById(tid).checked = true;
                };
            }
    }});
</script>

    {{ next_button }}
<br />
<p>
    <h2>Instruktionen</h2>
</p>
<p>
    Hier können Sie die Instruktionen nachlesen. Diese Intruktionen stimmen mit jenen, die Sie schon gelesen haben, überein.
</p>
    {{ include_sibling 'block_Instructions.html' }}

{{ endblock }}