{{ block title }}
    Teil 4
{{ endblock }}
{{ block content }}
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33%;
  padding: 10px;
}

.left, .right {
  width: 25%;
}

.middle {
  width: 40%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

h3 {text-align: center;}
</style>

    <p>
        Erinnerung: Sie sind in der <b>{{ player.paintGroup1 }}</b> Gruppe und in der <b>{{ player.paintGroup2 }}</b> Gruppe.
    </p>

    <h3>Runde 1 von 4</h3>

    <p>
        Wie möchten Sie Ihre Ausstattung zwischen sich und einer Person aufteilen, die in der
        {{ player.paintGroup1 }} Gruppe und der
        {{ player.paintGroup2 }} Gruppe ist?
    </p>
    <p>
        <div class="row">
        <div class="column left" align="center" style="border-style:solid; padding:8px 15px;margin:5px;border-radius:10px;border-color:blue">
            <br><h3>Sie</h3>
        </div>
        <div class="column middle" align="center"><br>
        <output name="outLeft" id="outLeft" style="background-color:blue; color:white;padding:8px 15px;margin:5px;border-radius:10px;">
            {{ C.payoffInit }}
        </output>€
        <input name="dict_1" id="dict_1" type="range" value="{{C.payoffInit}}*10" min="0" max="{{C.payoffAlloc}}" step="1" oninput="outLeft.value = String((({{C.payoffAlloc}} - dict_1.value)/10).toFixed(2)).replace('.',','); outRight.value = String((dict_1.value/10).toFixed(2)).replace('.',',')">
        <output name="outRight" id="outRight" style="background-color:blue; color:white;padding:8px 15px;margin:5px;border-radius:10px;">
            {{ C.payoffInit }}
        </output>€
        </div>
        <div class="column right" align="center" style="border-style:solid; padding:8px 15px;margin:5px;border-radius:10px;border-color:blue">
            Person in der<br>
            <b>{{ player.paintGroup1 }}</b> Gruppe<br>
            und der<br>
            <b>{{ player.paintGroup2 }}</b> Gruppe
        </div>
        </div>
    </p>
    {{ next_button }}

{{ endblock }}