<section>

    <div class="presets">
        <label><span>Voreinstellungen</span>
            {{!-- TODO implement logic --}}
            <select name="battle-presets">
                <option value="" selected></option>
                <option value="zechen-v-zechen">Vergleichend: Zechen</option>
                <option value="überreden-v-menschenkenntnis">Überreden</option>
                <option value="überzeugen-v-menschenkenntnis">Überzeugen</option>
                <option value="schleichen-v-sinnenschärfe">Schleichen</option>
                <option value="sich-verstecken-v-sinnenschärfe">Sich verstecken</option>
                <option value="glückspiel-v-glückspiel">Vergleichend: Glücksspiel</option>
                <option value="falschspiel-v-sinnenschärfe">Schummeln</option>
            </select>
            <button type="button" data-action="applyPreset"><i class="fa-solid fa-fill"></i></button>
        </label>
    </div>

    <div class="offense-character">
        <fieldset>
            <legend>Charakterauswahl</legend>
            <div class="scroll-y">
                {{#each actors}}
                    <div class="actor {{#if (eq ../offenseActor this._id)}}selected{{/if}}" data-id="{{this._id}}"
                         data-action="selectOffenseActor">
                        <img src="{{this.img}}" alt="{{this.name}}">
                        <span>{{this.name}}</span>
                    </div>
                {{/each}}
            </div>
        </fieldset>

        {{#if (not offenseAttributes)}}
            <fieldset>
                <legend>Eigenschaften</legend>

                <div class="attributes">

                    <div class="attribut">
                        <label><span>MU</span>
                            <input name="offenseAttributes.mu" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KL</span>
                            <input name="offenseAttributes.kl" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>IN</span>
                            <input name="offenseAttributes.in" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>CH</span>
                            <input name="offenseAttributes.ch" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>FF</span>
                            <input name="offenseAttributes.ff" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>GE</span>
                            <input name="offenseAttributes.ge" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KO</span>
                            <input name="offenseAttributes.ko" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KK</span>
                            <input name="offenseAttributes.kk" type="number"/>
                        </label>
                    </div>
                </div>

            </fieldset>
        {{else}}
            <fieldset>
                <legend>Eigenschaften</legend>

                <div class="attributes">

                    <div class="attribut">
                        <label><span>MU</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.mu}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KL</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.kl}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>IN</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.in}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>CH</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.ch}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>FF</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.ff}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>GE</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.ge}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KK</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.kk}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KO</span>
                            <output name="offenseAttributes.mu">{{offenseAttributes.ko}}</output>
                        </label>
                    </div>
                </div>

            </fieldset>
        {{/if}}

        {{#if offenseTalents}}
            <fieldset>
                <legend>Talent</legend>
                <span class="dummylabel">&nbsp;</span>
                <select name="offense.talent">
                    {{selectOptions offenseTalents selected=offenseTalent inverted=true}}
                </select>
            </fieldset>
        {{else}}
            <fieldset>
                <legend>Talent</legend>
                <div class="talent">
                    <label class="name"><span>Name</span> <input type="text" name="offense.talent.name"/></label>
                    <label class="value"><span>TaW</span> <input type="text" name="offense.talent.taw"/></label>
                    <label class="p1"><span></span> <input class="attrib" type="text"
                                                           name="offense.talent.probe.0.name"/></label>
                    <label class="p2"><span></span> <input class="attrib" type="text"
                                                           name="offense.talent.probe.1.name"/></label>
                    <label class="p3"><span></span> <input class="attrib" type="text"
                                                           name="offense.talent.probe.2.name"/></label>
                </div>
            </fieldset>
        {{/if}}

        <fieldset>
            <legend>Erschwernisse</legend>
            <input name="offense_penalty" type="number"/>
        </fieldset>
    </div>

    <div class="defense-character">
        <fieldset>
            <legend>Charakterauswahl</legend>
            <div class="scroll-y">
                {{#each actors}}
                    <div class="actor {{#if (eq ../defenseActor this._id)}}selected{{/if}}" data-id="{{this._id}}"
                         data-action="selectDefenseActor">
                        <img src="{{this.img}}" alt="{{this.name}}">
                        <span>{{this.name}}</span>
                    </div>
                {{/each}}
            </div>
        </fieldset>

        {{#if (not defenseAttributes)}}
            <fieldset>
                <legend>Eigenschaften</legend>

                <div class="attributes">

                    <div class="attribut">
                        <label><span>MU</span>
                            <input name="defenseAttributes.mu" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KL</span>
                            <input name="defenseAttributes.kl" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>IN</span>
                            <input name="defenseAttributes.in" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>CH</span>
                            <input name="defenseAttributes.ch" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>FF</span>
                            <input name="defenseAttributes.ff" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>GE</span>
                            <input name="defenseAttributes.ge" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KK</span>
                            <input name="defenseAttributes.ko" type="number"/>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KO</span>
                            <input name="defenseAttributes.kk" type="number"/>
                        </label>
                    </div>
                </div>

            </fieldset>
        {{else}}
            <fieldset>
                <legend>Eigenschaften</legend>

                <div class="attributes">

                    <div class="attribut">
                        <label><span>MU</span>
                            <output name="defenseAttributes.mu">{{defenseAttributes.mu}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KL</span>
                            <output name="defenseAttributes.kl">{{defenseAttributes.kl}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>IN</span>
                            <output name="defenseAttributes.in">{{defenseAttributes.in}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>CH</span>
                            <output name="defenseAttributes.ch">{{defenseAttributes.ch}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>FF</span>
                            <output name="defenseAttributes.ff">{{defenseAttributes.ff}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>GE</span>
                            <output name="defenseAttributes.ge">{{defenseAttributes.ge}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KO</span>
                            <output name="defenseAttributes.ko">{{defenseAttributes.ko}}</output>
                        </label>
                    </div>

                    <div class="attribut">
                        <label><span>KK</span>
                            <output name="defenseAttributes.kk">{{defenseAttributes.kk}}</output>
                        </label>
                    </div>
                </div>

            </fieldset>
        {{/if}}

        {{#if defenseTalents}}
            <fieldset>
                <legend>Talent</legend>
                <span class="dummylabel">&nbsp;</span>
                <select name="defense.talent">
                    {{selectOptions defenseTalents selected=defenseTalent inverted=true}}
                </select>
            </fieldset>
        {{else}}
            <fieldset>
                <legend>Talent</legend>
                <div class="talent">
                    <label class="name"><span>Name</span> <input type="text" name="defense.talent.name"/></label>
                    <label class="value"><span>TaW</span> <input type="text" name="defense.talent.taw"/></label>
                    <label class="p1"><span></span> <input class="attrib" type="text"
                                                           name="defense.talent.probe.0.name"/></label>
                    <label class="p2"><span></span> <input class="attrib" type="text"
                                                           name="defense.talent.probe.1.name"/></label>
                    <label class="p3"><span></span> <input class="attrib" type="text"
                                                           name="defense.talent.probe.2.name"/></label>
                </div>
            </fieldset>
        {{/if}}

        <fieldset>
            <legend>Erschwernisse</legend>
            <input name="defense_penalty" type="number"/>
        </fieldset>
    </div>

    <div class="summary">
        {{#if (or (not offenseTalents) (not offenseAttributes))}}
            <div class="offenseActorSave"><label><input name="saveOffenseData" type="checkbox">Daten speichern</label>
            </div>
        {{/if}}
        <button type="button" data-action="doBattle"><i class="fa-solid fa-user-secret"></i> Würfeln</button>
        {{#if (or (not defenseTalents) (not defenseAttributes))}}
            <div class="defenseActorSave"><label><input name="saveDefenseData" type="checkbox">Daten speichern</label>
            </div>
        {{/if}}

    </div>

</section>