{{!-- FoundryVTT v12 --}}

<form autocomplete="off">

    <!-- Effect Header -->
    <header class="sheet-header">
        <img class="effect-img" src="{{ data.img }}" data-edit="img">
        <h1 class="effect-title">
            <input name="name" type="text" value="{{data.name}}" placeholder="{{ localize 'Name' }}"/>
        </h1>
    </header>

    <!-- Effect Configuration Tabs -->
    <nav class="sheet-tabs tabs" aria-role="{{localize 'SHEETS.FormNavLabel'}}">
        <a class="item" data-tab="effects"><i class="fas fa-cogs"></i> {{localize "EFFECT.TabEffects"}}</a>
        <a class="item" data-tab="details"><i class="fas fa-book"></i> {{localize "EFFECT.TabDetails"}}</a>
        <a class="item" data-tab="duration"><i class="fas fa-clock"></i> {{localize "EFFECT.TabDuration"}}</a>
    </nav>

    <!-- Details Tab -->
    <section class="tab" data-tab="details">
        <div class="form-group">
            <label>{{ localize "EFFECT.Tint" }}</label>
            <div class="form-fields">
                <color-picker name="tint" value="{{data.tint}}" placeholder="#ffffff"></color-picker>
            </div>
        </div>

        <div class="form-group stacked">
            <label>{{ localize "EFFECT.Description" }}</label>
            {{editor descriptionHTML target="description" button=false editable=editable engine="prosemirror" collaborate=false}}
        </div>

        <div class="form-group">
            <label>{{ localize "EFFECT.Disabled" }}</label>
            <input type="checkbox" name="disabled" {{ checked data.disabled }}/>
        </div>

        {{#if isActorEffect}}
        <div class="form-group">
            <label>{{ localize "EFFECT.Origin" }}</label>
            <div class="form-fields">
                <input type="text" name="origin" value="{{ data.origin }}" disabled/>
            </div>
        </div>
        {{/if}}

        {{#if isItemEffect}}
        {{#iff document.parent.type '!=' "mod"}}
        <div class="form-group">
            <label>{{ labels.transfer.name }}</label>
            <div class="form-fields">
                <input type="checkbox" name="transfer" {{checked data.transfer}}/>
            </div>
            <p class="hint">{{ labels.transfer.hint }}</p>
        </div>
        {{/iff}}
        {{/if}}

        <div class="form-group">
            <label>Status Conditions</label>
            <div class="form-fields">
                <multi-select name="statuses">
                    {{#each statuses as |status|}}
                    <option value="{{status.id}}" {{status.selected}}>{{status.label}}</option>
                    {{/each}}
                </multi-select>
            </div>
        </div>
    </section>

    <!-- Duration Tab -->
    <section class="tab" data-tab="duration">
        <div class="form-group">
            <label>{{ localize "EFFECT.DurationSecs" }}</label>
            <div class="form-fields">
                <input type="number" name="duration.seconds" value="{{ data.duration.seconds }}"/>
            </div>
        </div>
        <div class="form-group">
            <label>{{ localize "EFFECT.StartTime" }}</label>
            <div class="form-fields">
                <input type="number" name="duration.startTime" value="{{ data.duration.startTime }}"/>
            </div>
        </div>
        <hr/>
        <div class="form-group">
            <label>{{ localize "EFFECT.DurationTurns" }}</label>
            <div class="form-fields">
                <label>{{ localize "COMBAT.Rounds" }}</label>
                <input type="number" name="duration.rounds" value="{{ data.duration.rounds }}"/>
                <label>{{ localize "COMBAT.Turns" }}</label>
                <input type="number" name="duration.turns" value="{{ data.duration.turns }}"/>
            </div>
        </div>
        <div class="form-group">
            <label>{{ localize "EFFECT.Combat" }}</label>
            <div class="form-fields">
                <input type="text" name="duration.combat" value="{{ data.duration.combat }}" disabled/>
            </div>
        </div>

        <div class="form-group">
            <label>{{ localize "EFFECT.StartTurns" }}</label>
            <div class="form-fields">
                <label>{{ localize "COMBAT.Round" }}</label>
                <input type="number" name="duration.startRound" value="{{ data.duration.startRound }}"/>
                <label>{{ localize "COMBAT.Turn" }}</label>
                <input type="number" name="duration.startTurn" value="{{ data.duration.startTurn }}"/>
            </div>
        </div>
    </section>

    <!-- Effects Tab -->
    <section class="tab" data-tab="effects">
        <div>
            <div class="form-group stacked">
                <p>{{{localize "shadowrun6.active_effect.explanation"}}}</p>
                <ul>
                    {{#each labels.usage_tips as |tip i|}}
                        <li>{{{localize (concat "shadowrun6.active_effect.usage_tips." i) }}}</li>
                    {{/each}}
                    {{#if isItemEffect}}
                        {{#iff document.parent.type '==' "mod"}}
                        <li>{{{localize "shadowrun6.active_effect.gear_mod_tip"}}}</li>
                        {{else}}
                        <li>{{{localize "shadowrun6.active_effect.item_tip"}}}</li>
                        {{/iff}}
                    {{/if}}
                </ul>
                <p>{{localize "shadowrun6.active_effect.more_info"}} <a href="https://foundryvtt.com/article/active-effects/">FoundryVTT.com Active Effects</a></p>
            </div>
            <div class="form-group">
                <label>{{localize "shadowrun6.active_effect.advanced"}}</label>
                <div class="form-fields"><input type="checkbox" name="system.advanced" class="advanced-active-effects" {{#if data.system.advanced}}checked{{/if}} /></div>
                <p class="hint">{{localize "shadowrun6.active_effect.advanced_hint"}}</p>
            </div>
        </div>

        <header class="effect-change effects-header flexrow">
            <div class="key">{{ localize "EFFECT.ChangeKey" }}</div>
            <div class="mode">{{ localize "EFFECT.ChangeMode" }}</div>
            <div class="value">{{ localize "EFFECT.ChangeValue" }}</div>
            <div class="effect-controls">
                <a class="effect-control" data-action="add"><i class="far fa-plus-square"></i></a>
            </div>
        </header>
        <ol class="changes-list">
            {{#each data.changes as |change i|}}
            <li class="effect-change flexrow" data-index="{{i}}">
                <div class="key">
                    {{#if ../data.system.advanced}}
                    <input type="text" name="changes.{{i}}.key" value="{{change.key}}" list="effect-option-list"/>
                    {{else}}
                    <select name="changes.{{i}}.key" data-dtype="text">
                        {{datalistOptions ../ACTIVE_EFFECT_OPTIONS selected=change.key localize=true blank=""}}
                    </select>
                    {{/if}}
                </div>
                <div class="mode">
                    <select name="changes.{{i}}.mode" data-dtype="Number">
                        {{selectOptions ../modes selected=change.mode}}
                    </select>
                </div>
                <div class="value">
                    <input type="text" name="changes.{{i}}.value" value="{{change.value}}"/>
                </div>
                <div class="effect-controls">
                    <a class="effect-control" data-action="delete"><i class="fas fa-trash"></i></a>
                </div>
            </li>
            {{/each}}
        </ol>
        {{#if data.system.advanced}}
        <datalist id="effect-option-list">
            {{datalistOptions ACTIVE_EFFECT_OPTIONS localize=true}}
        </datalist>
        {{/if}}
    </section>

    {{!-- <footer class="sheet-footer">
        <button type="submit"><i class="fas fa-save"></i> {{localize submitText}}</button>
    </footer> --}}
</form>