{{ block title }}
    {{ include_sibling 'block_Header.html' }}
    Ihre Beförderungsentscheidungen und Lohnangebote für Ihre aktuellen Arbeitnehmer
{{ endblock }}
{{ block content }}
Sie gehören zur Farbgruppe {{ player.color_html }}.
Einer Ihrer aktuellen Arbeitnehmer gehört zu{{ if others.worker1.same_color }} Ihrer{{ else }}r{{ endif }}
Farbgruppe {{ others.worker1.color_html }}.
Der andere gehört zu{{ if others.worker2.same_color }} Ihrer{{ else }}r{{ endif }}
Farbgruppe {{ others.worker2.color_html }}.<br>
Geben Sie in den Eingabefeldern an, welchen Ihrer Arbeitnehmer Sie befördern und welche Löhne in Talern Sie Ihren Arbeitnehmern bieten.
Sie können Ihre Entscheidungen von den Leistungsfähigkeiten Ihrer Arbeitnehmer machen. Jeder Arbeitnehmer kann hohe oder
niedrige Leistungsfähigkeit haben. Daraus ergeben sich vier mögliche Fälle.<br/>
Die Reihenfolge der Anzeige der Arbeitnehmer
ist zufällig und unabhangig von der Anzeige bei anderen Arbeitgebern. 

<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 == player.color_id }}Ihrer{{ else }}der{{ endif }} 
                Farbgruppe {{ case.worker1.color_html }}</br>hat <b>{{ case.worker1_ability }}</b> Leistungsfähigkeit</td>
            <td rowspan="2">In diesem Fall</br>möchte ich</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.promotion }}</td><td>... und biete ihm</br>einen Lohn von</td><td>{{ formfield case.offer1 }}</td>
        </tr>
        <tr>
            <td>Der {{ case.worker2.role_html }} aus {{ if case.worker2.color_id == player.color_id }}Ihrer{{ 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.promotion_inv }}</td><td>... und biete ihm</br>einen Lohn von</td><td>{{ formfield case.offer2 }}</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, 13) + "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 }}