<section>

    <div class="attributes {{#if this.colorfulDice}}colorfulDice{{/if}}">

        <hr class="zier"/>

        {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this.mu}}
        {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this.in}}
        {{> "systems/DSA_4-1/templates/ui/partial-attribute-button.hbs" this.ch}}

        <hr class="zier"/>

    </div>


    <div class="result">
        {{#if resultingLiturgy}}
            <div><span>Liturgie:</span> {{resultingLiturgy.name}}</div>
            <div><span>Grad:</span> {{resultingLiturgy.rank}}</div>
            <div><span>Kosten:</span> {{resultingLiturgy.costKaP}} KaP {{#if resultingLiturgy.costKaPPermanent}}
                (davon {{resultingLiturgy.costKaP}} permanent){{/if}}</div>
            <div><span>Ziel:</span> {{resultingLiturgy.target}}</div>
            <div><span>Wirkdauer:</span> {{resultingLiturgy.duration}}</div>
            <div><span>Wirkzeit:</span> {{resultingLiturgy.castduration}}</div>
        {{/if}}
    </div>

    <div class="scroll-y">
        <table>
            <tr>
                <th>Grad</th>
                <th>Wirkung</th>
            </tr>
            {{#each variations}}
                <tr>
                    <th><label><input type="radio" data-action="selectVariant" data-rank="{{this.rank}}" {{checked
                            (eq this.rank ../variation.rank)}}>{{this.rank}}</label></th>
                    <td>{{this.effect}}</td>
                </tr>
            {{/each}}


        </table>
    </div>

    {{#if moddingEnabled}}

<h2>Modifizieren</h2>

    <table id="mods">

        {{#each mods}}
            <tr>
                <td>{{this.displayRank}}</td>
                <td>{{this.mod}}</td>
                <td>
                    <button type="button" data-action="removeMod" data-index="{{@key}}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </td>
            </tr>
        {{/each}}

    </table>

<div class="editor">
    <div id="mod_rank" class="rank">{{this.addingModRank}}</div>
    <div class="modification">
        <select name="mod" {{disabled (not canMod)}}>
            <option value=""> - auswählen -</option>
            <option value="range">Reichweite</option>
            <option value="strength">Wirkung</option>
            <option value="target">Ziele</option>
            <option value="castduration">Wirkzeit</option>
            <option value="duration">Wirkungsdauer</option>
        </select>
        <button type="button" data-action="addMod"><i class="fa fa-plus"></i></button>
        <span id="info"></span>
    </div>
</div>
    {{/if}}

    <fieldset class="modding">
        <legend>Erschwernisse</legend>
        <div class="malus-and-mod">
            <label><span>LkP</span>
                <output name="lkp" type="number">{{lkp}}</output>
            </label>
            <label><span>Umstände</span>
                <input name="circumstance" type="number" value="{{circumstance}}">
            </label>
            <label><span>Modifikation</span>
                <output name="penalty">{{resultingCastPenalty}}</output>
            </label>
        </div>
        <output class="modResult"></output>
    </fieldset>


    <button type="button" class="actions" data-action="castLiturgy"><i class="fa-solid fa-sparkles"></i> Wirken {{#if modResult}}
        [{{displayModResult}}]{{/if}}</button>

</section>