<ol class="form-list">
    <div class="form-group">
        <label>{{localize "PF2E.Item.Affliction.SaveLabel"}}</label>
        <div class="form-fields">
            <input type="number" name="system.save.value" value="{{data.save.value}}">
            <select name="system.save.type">
                {{selectOptions saves selected=data.save.type localize=true}}
            </select>
        </div>
    </div>
</ol>

{{#each stages as |stage stageId|}}
    <ol class="form-list subsection affliction-stage" data-stage-id="{{stageId}}">
        <header>
            <h3>{{localize "PF2E.Item.Affliction.Stage" stage=stage.stage}}</h3>
            <div class="item-controls">
                <i class="fa-solid fa-fw fa-times" data-action="stage-delete"></i>
            </div>
        </header>

        <div class="damage-formulas">
            <h3>
                {{localize "PF2E.Formula"}}
                <div class="item-controls">
                    <i class="fa-solid fa-fw fa-plus" data-action="damage-create"></i>
                </div>
            </h3>

            {{#each stage.damage as |damage id|}}
                <div class="formula-section">
                    <div class="formula-row">
                        <input type="text" name="system.stages.{{stageId}}.damage.{{id}}.formula" value="{{damage.formula}}" placeholder="{{localize "PF2E.Formula"}}" />
                        <select name="system.stages.{{stageId}}.damage.{{id}}.category">
                            {{selectOptions @root.damageCategories selected=damage.category blank="" localize=true}}
                        </select>
                        <select name="system.stages.{{stageId}}.damage.{{id}}.type">
                            {{selectOptions @root.damageTypes selected=damage.type localize=true}}
                        </select>
                        <div class="item-controls">
                            <a data-action="damage-delete" data-id="{{id}}"><i class="fa-solid fa-fw fa-times"></i></a>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>

        <section>
            <h3>
                {{localize "PF2E.ConditionsLabel"}}
                <div class="item-controls">
                    <i class="fa-solid fa-fw fa-plus" data-action="condition-create"></i>
                </div>
            </h3>
            <div class="form-group two-by-two">
                {{#each stage.conditions as |condition key|}}
                    <div class="form-fields stage-condition" data-condition-id="{{key}}">
                        <select name="system.stages.{{stageId}}.conditions.{{key}}.slug">
                            {{selectOptions @root.conditionTypes selected=condition.slug localize=true}}
                        </select>
                        {{#if condition.document.system.value.isValued}}
                            <input type="number" name="system.stages.{{stageId}}.conditions.{{key}}.value" value="{{condition.value}}" />
                        {{/if}}
                        {{#if @root.options.editable}}
                            <div class="item-controls">
                                <a class="link {{#if condition.linked}}linked{{/if}}" data-action="condition-link" title="{{localize "PF2E.Item.Affliction.Linked.Title"}}">
                                    <i class="fa-solid fa-fw {{#if condition.linked}}fa-link{{else}}fa-link-slash{{/if}}"></i>
                                </a>
                                <a class="remove" data-action="condition-delete"><i class="fa-solid fa-fw fa-times"></i></a>
                            </div>
                        {{/if}}
                    </div>
                {{/each}}
            </div>
        </section>

        <section class="item-ref-group">
            <h3>{{localize "PF2E.EffectsLabel"}}</h3>
            {{#if stage.effects}}
                <ul class="item-refs">
                    {{#each stage.effects as |effect|}}
                        <li data-uuid="{{effect.uuid}}">
                            <img class="icon" src="{{effect.img}}" />
                            <a class="name document-link" data-uuid="{{effect.uuid}}" data-action="view-effect">{{effect.name}}</a>
                            <span></span>
                            {{#if @root.options.editable}}<a class="remove" data-action="effect-delete"><i class="fa-solid fa-xmark"></i></a>{{/if}}
                        </li>
                    {{/each}}
                </ul>
            {{/if}}
        </section>

        <div class="form-group">
            <label class="short">{{localize "PF2E.Time.Duration"}}</label>
            {{> systems/pf2e/templates/items/partials/duration.hbs base=(concat "system.stages." stageId ".duration") duration=stage.duration units=../durationUnits}}
        </div>
    </ol>
{{/each}}

<button type="button" data-action="stage-add">
    <i class="fa-solid fa-plus"></i>{{localize "PF2E.Item.Affliction.AddStage"}}
</button>
