<section>

    {{#unless zfpDetermined}}

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

        <hr class="zier"/>

        {{#each dice}}

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

        {{/each}}

        <hr class="zier"/>

    </div>

    <div class="scroll-y">
        {{{this.text}}}
    </div>

    <div>
        <label><span>Repräsentation:
        </span>
            <select name="representation">
                {{selectOptions representationOptions selected=selectedRepresentation inverted=true}}
            </select></label>
    </div>

    {{#if this.variants}}
        <fieldset class="scroll-y">
            <legend>Variante</legend>
            <div class="variantList">
                {{#each this.variants}}
                    <div class="variant">
                        <div class="selection">
                            <label>
                                <input type="checkbox" name="variants.{{variantName}}" {{checked variantChecked}}>
                                {{#if (gte variantPenalty 0)}}+{{/if}}{{variantPenalty}}
                            </label>
                        </div>
                        <div class="variantText">
                            <em>{{variantName}}</em><br/>
                            {{{variantText}}}
                        </div>
                    </div>

                {{/each}}
            </div>

        </fieldset>
    {{/if}}

        {{#if checkModTest}}
            <fieldset>
                <legend>Erschwernisse</legend>
                <div class="malus-and-mod">
                    <label><span>{{checkModTest}}</span>
                        <input name="checkMod" type="number" value="{{checkModValue}}">
                    </label>
                </div>
            </fieldset>
        {{/if}}

            <button type="button" class="actions" {{#unless noSelectedRepresentation}}data-action="diceRoll"{{else}} disabled="disabled"{{/unless}}><i class="fa-solid fa-dice"></i> Zauber würfeln {{#if
                displayModResult}}
            [{{displayModResult}}]{{/if}}</button>

    {{else}}

        <fieldset class="scroll-y">
            <legend>{{spellName}}</legend>
                {{{this.text}}}
            {{#if variant}}
                <hr/>
                {{{variant}}}
            {{/if}}
            {{#if checkModTest}}
                <hr/>
                <em>{{checkModTest}}</em>&mdash;{{checkModValue}}
            {{/if}}
        </fieldset>

        {{#if this.spoMods}}
        <fieldset class="scroll-y">
            <legend>Spontane Modifikation {{#if this.spoModCount}}{{#if this.maxSpoModCount}}
                [{{this.spoModCount}}/{{this.maxSpoModCount}}]{{/if}}{{/if}}</legend>
            <div class="variantList">
                {{#each this.spoMods}}
                    <div class="variant" data-tooltip="{{{description}}}">
                        <div class="selection">
                            <label>
                                <input type="number" name="spoMods.{{name}}" value="{{value}}">
                                <span>&times; {{#if (gte mod 0)}}+{{/if}}{{mod}}</span>
                            </label>
                        </div>
                        <div class="variantText">
                            <em>{{name}}</em>
                        </div>
                    </div>
                {{/each}}
            </div>
    </fieldset>
    {{/if}}

    <fieldset>
        <legend>Variablen</legend>
        {{#each castTimeVariables}}
            <div>
                <label for="{{this}}">{{this}}: </label>
                <input type="number" name="castTimeMutators.{{this}}" value="{{lookup ../castTimeMutators this}}"/>
            </div>
        {{/each}}
        {{#each costVariables}}
            <div>
                <label for="{{this}}">{{this}}: </label>
                <input type="number" name="costMutators.{{this}}" value="{{lookup ../costMutators this}}"/>
            </div>
        {{/each}}
    </fieldset>


    <fieldset>
        <legend>Dauer und Kosten</legend>
        <div class="malus-and-mod">
            <label><span>ZfP*</span>
                <output name="zfp">{{zfpModified}}</output>
            </label>
            <label><span>Zauberdauer (A)</span>
                <output name="castingTime">{{castingTime}}</output>
            </label>
            <label><span>Kosten (AsP)</span>
                <output name="costs">{{castingCosts}}</output>
            </label>
        </div>
    </fieldset>

    <div class="actions">
        <button type="button" {{#if ready}}data-action="cast" {{else}}
        data-tooltip="{{{notReadyReasons}}}" disabled="disabled" {{/if}}><i class="fa-solid fa-sparkles"></i> Zauber
            wirken
        </button>
        <button type="button" data-action="cancel">
            Zauber abbrechen
        </button>
    </div>

    {{/unless}}

</section>