<section>

    <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>

    <table>
        {{#each this.mods}}
            <tr>
                <td>
                    <input type="checkbox" name="mods.{{this.mod}}" value="{{this.value}}" {{checked this.active}}>
                </td>
                <td>
                    {{this.name}}
                </td>
                <td>
                    {{this.value}}
                </td>
            </tr>
        {{/each}}
    </table>

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


    <button type="button" class="actions" data-action="use"><i class="fa-solid fa-bolt"></i> Eigenschaftseinsatz {{#if modResult}}
        [{{displayModResult}}]{{/if}}</button>

</section>