{{ block title }}
    Teil 3
{{ 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 3 von 5</h3>

    <p>
        Wie möchten Sie Ihre Ausstattung zwischen einer Person aufteilen, die in der
        {{ if player.paintGroup1 == C.painter1 }} {{ C.painter2 }} {{ else }} {{ C.painter1 }} {{ endif }} Gruppe
        und in der {{ player.paintGroup2 }} Gruppe ist,
        und einer Person, die in der {{ player.paintGroup1 }} Gruppe
        und in 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">
            Person in der<br>
            <b>{{ if player.paintGroup1 == C.painter1 }} {{ C.painter2 }} {{ else }} {{ C.painter1 }} {{ endif }}</b> Gruppe<br>
            und in der<br>
            <b>{{ player.paintGroup2 }}</b> Gruppe
        </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="alloc_3" id="alloc_3" type="range" value="{{C.payoffInit}}*10" min="0" max="{{C.payoffAlloc}}" step="1" oninput="outLeft.value = String((({{C.payoffAlloc}} - alloc_3.value)/10).toFixed(2)).replace('.',','); outRight.value = String((alloc_3.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 in der<br>
            <b>{{ player.paintGroup2 }}</b> Gruppe
        </div>
        </div>
    </p>
    {{ next_button }}

{{ endblock }}