<form class="check-modifiers-content" autocomplete="off" spellcheck="off">
    <div class="dialog-row header">
        <span class="type">{{localize "PF2E.Roll.Type"}}</span>
        <span class="mod">{{localize "PF2E.Roll.Modifier"}}</span>
        <span class="exclude"></span>
    </div>
    <div class="modifier-container">
        {{#if hasVisibleModifiers}}
            {{#each modifiers as |modifier idx|}}
                {{#if modifier.show}}
                    {{> modifier-row modifier=modifier idx=idx}}
                {{/if}}
            {{/each}}
        {{else}}
            <div class="dialog-row">
                <span class="no-mod">{{localize "PF2E.Damage.Dialog.None"}}</span>
            </div>
        {{/if}}
    </div>
    <hr />

    <div class="add-modifier-panel">
        <input type="text" class="add-modifier-name" placeholder={{localize "PF2E.Damage.Dialog.Label"}}>
        <select class="add-modifier-type">
            <option value="circumstance" selected>{{localize "PF2E.ModifierType.circumstance"}}</option>
            <option value="item">{{localize "PF2E.ModifierType.item"}}</option>
            <option value="status">{{localize "PF2E.ModifierType.status"}}</option>
            <option value="untyped">{{localize "PF2E.ModifierType.untyped"}}</option>
            <option value="ability">{{localize "PF2E.ModifierType.ability"}}</option>
            <option value="proficiency">{{localize "PF2E.ModifierType.proficiency"}}</option>
        </select>
        <select class="add-modifier-category">
            <option value=""></option>
            {{#each damageSubtypes as |name type|}}
                <option value="{{type}}">{{localize name}}</option>
            {{/each}}
        </select>
        <select class="add-modifier-damage-type">
            <option value=""></option>
            {{#each damageTypes as |name type|}}
                <option value="{{type}}">{{localize name}}</option>
            {{/each}}
        </select>
        <input type="number" class="add-modifier-value" placeholder="+1">
        <button type="button" class="add-modifier">+{{localize "PF2E.Roll.Add"}}</button>
    </div>
    <hr />

    <div class="dialog-row header">
        <span class="type"></span>
        <span class="mod">{{localize "PF2E.Damage.Dialog.BonusDice"}}</span>
        <span class="exclude"></span>
    </div>
    <div class="modifier-container">
        {{#if hasVisibleDice}}
            {{#each dice as |die idx|}}
                {{#if die.show}}
                    {{> dice-row dice=die idx=idx}}
                {{/if}}
            {{/each}}
        {{else}}
            <div class="dialog-row">
                <span class="no-mod">{{localize "PF2E.Damage.Dialog.None"}}</span>
            </div>
        {{/if}}
    </div>
    <hr/>

    <div class="add-dice-panel">
        <input type="text" class="add-dice-name" placeholder="{{localize "PF2E.Damage.Dialog.Label"}}">
        <input type="text" class="add-dice-count" placeholder="1">
        <select class="add-dice-faces">
            <option value="d4">{{localize "PF2E.DamageDieD4"}}</option>
            <option value="d6">{{localize "PF2E.DamageDieD6"}}</option>
            <option value="d8">{{localize "PF2E.DamageDieD8"}}</option>
            <option value="d10">{{localize "PF2E.DamageDieD10"}}</option>
            <option value="d12">{{localize "PF2E.DamageDieD12"}}</option>
        </select>
        <select class="add-dice-category">
            <option value="" selected></option>
            {{#each damageSubtypes as |name type|}}
                <option value="{{type}}">{{localize name}}</option>
            {{/each}}
        </select>
        <select class="add-dice-type">
            {{#each damageTypes as |name type|}}
                <option value="{{type}}">{{localize name}}</option>
            {{/each}}
        </select>
        <button type="button" class="add-dice">+{{localize "PF2E.Roll.Add"}}</button>
    </div>
    <hr />

    <div class="roll-mode-panel">
        <span class="label">{{localize "PF2E.RollModeLabel"}}</span>
        <select name="rollmode">
            {{#select rollMode}}
                {{#each rollModes as |label key|}}
                    <option value="{{key}}">{{localize label}}</option>
                {{/each}}
            {{/select}}
        </select>
    </div>
    <hr />

    <button type="button" class="roll">{{{formula}}}</button>
</form>

{{#*inline "icon-container"}}
    <div class="icon-container">
        {{#if (eq modifier.category "splash")}}
            {{#if modifier.icon}}
                <i class="{{modifier.icon}}"></i>
            {{/if}}
            {{#if modifier.categoryIcon}}
                <i class="{{modifier.categoryIcon}} category"></i>
            {{/if}}
        {{else}}
            {{#if modifier.categoryIcon}}
                <i class="{{modifier.categoryIcon}} category"></i>
            {{/if}}
            {{#if modifier.icon}}
                <i class="{{modifier.icon}}"></i>
            {{/if}}
        {{/if}}
    </div>
{{/inline}}

{{#*inline "modifier-row"}}
    <div class="dialog-row{{#unless modifier.enabled}} disabled{{#if modifier.hideIfDisabled}} hidden{{/if}}{{/unless}}">
        <span class="mod">{{modifier.label}}</span>
        <span class="type tag">{{localize (concat "PF2E.ModifierType." modifier.type)}}</span>
        <div class="modifier-type{{#if modifier.damageType}} {{modifier.damageType}}{{/if}}" title="{{modifier.typeLabel}}">
            <span class="value">{{numberFormat modifier.modifier decimals=0 sign=true}}</span>
            {{> icon-container modifier=modifier}}
        </div>
        <label class="exclude toggle">
            <input type="checkbox" id="{{@root.appId}}-modifier-{{idx}}" data-modifier-index="{{idx}}" {{checked (not modifier.ignored)}} />
            <label for="{{@root.appId}}-modifier-{{idx}}"></label>
        </label>
    </div>
{{/inline}}

{{#*inline "dice-row"}}
    <div class="dialog-row{{#unless dice.enabled}} disabled{{/unless}}">
        <span class="mod">{{dice.label}}</span>
        <div class="dice-type value{{#if dice.damageType}} {{dice.damageType}}{{/if}}" title="{{dice.typeLabel}}">
            <span class="value">{{dice.diceLabel}}</span>
            {{> icon-container modifier=dice}}
        </div>
        <label class="exclude toggle">
            <input type="checkbox" id="{{@root.appId}}-dice-{{idx}}" data-dice-index="{{idx}}" data-slug="{{dice.slug}}" {{checked (not dice.ignored)}} />
            <label for="{{@root.appId}}-dice-{{idx}}"></label>
        </label>
    </div>
{{/inline}}
