<form class="{{cssClass}}" autocomplete="off" onsubmit="event.preventDefault();">
    <header class="sheet-header flexrow">
        <h1 class="name">
            <input type="text" name="name" value="{{entity.name}}" placeholder="Name"/>
        </h1>
    </header>

    <div class="form-group stacked">
        <label>{{ localize "TABLE.Description" }}</label>
        <textarea name="description">{{ entity.description }}</textarea>
    </div>

    <div class="form-group">
        <label>{{ localize "TABLE.Formula" }}</label>
        <input type="text" name="formula" value="{{entity.formula}}" placeholder="Roll Formula"/>
    </div>

    <div class="form-group">
        <label>{{ localize "TABLE.Replacement" }}</label>
        <input type="checkbox" name="replacement" {{checked entity.replacement}}/>
    </div>

    <div class="form-group">
        <label>{{ localize "TABLE.DisplayRoll" }}</label>
        <input type="checkbox" name="displayRoll" {{checked entity.displayRoll}}/>
    </div>

    <!-- Roll Table Results Loop -->
    <section class="results">
        <ol class="table-results">
            <li class="table-result table-header flexrow">
                <div class="result-image">
                    <a class="create-result" title="{{ localize "TABLE.ResultCreate" }}">
                        <i class="fas fa-plus"></i>
                    </a>
                </div>

                <div class="result-type">
                    <label>{{ localize "TABLE.ResultType" }}</label>
                </div>

                <div class="result-details">
                    <label>{{ localize "TABLE.ResultDetails" }}</label>
                </div>

                <div class="result-weight">
                    <label>{{ localize "TABLE.ResultWeight" }}</label>
                </div>

                <div class="result-range">
                    <label>{{ localize "TABLE.ResultRange" }}</label>
                </div>

                {{#if owner}}
                <div class="result-controls">
                    <a class="normalize-results" title="{{ localize "TABLE.Normalize" }}">
                        <i class="fas fa-balance-scale"></i>
                    </a>
                </div>
                {{/if}}
            </li>

            {{#each results as |result i|}}
            <li class="table-result flexrow {{#if result.drawn}}drawn{{/if}}" data-result-id="{{result._id}}">
                <input type="hidden" name="results.{{i}}._id" value="{{result._id}}"/>

                <div class="result-image">
                    <img src="{{result.img}}" data-edit="results.{{i}}.img" width="32" height="32"/>
                </div>

                <div class="result-type">
                    <select name="results.{{i}}.type" data-dtype="Number">
                        {{#select result.type}}
                        {{#each ../resultTypes as |title type|}}
                        <option value="{{type}}">{{title}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                </div>

                <div class="result-details">
                    <input type="hidden" name="results.{{i}}.resultId" value="{{result.resultId}}"/>

                    {{#if result.isText}}
                    <input type="text" name="results.{{i}}.text" value="{{result.text}}" placeholder="Result description"/>

                    {{else if result.isEntity}}
                    <select name="results.{{i}}.collection">
                        {{#select result.collection}}
                        {{#each ../entityTypes}}
                        <option value="{{this}}">{{this}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                    <input class="result-target" name="results.{{i}}.text" type="text" value="{{result.text}}"/>

                    {{else if result.isCompendium}}
                    <select name="results.{{i}}.collection">
                        {{#select result.collection}}
                        {{#each ../compendiumPacks}}
                        <option value="{{this}}">{{this}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                    <input class="result-target" name="results.{{i}}.text" type="text" value="{{result.text}}"/>
                    {{/if}}
                </div>

                <div class="result-weight">
                    <input type="text" name="results.{{i}}.weight" value="{{result.weight}}" placeholder="1" data-dtype="Number"/>
                </div>

                <div class="result-range">
                    <input type="text" name="results.{{i}}.rangeL" value="{{result.range.[0]}}" placeholder="L" data-dtype="Number"/>
                    <span> - </span>
                    <input type="text" name="results.{{i}}.rangeH" value="{{result.range.[1]}}" placeholder="H" data-dtype="Number"/>
                </div>

                {{#if ../owner}}
                <div class="result-controls">
                    <a class="lock-result" title="{{ localize "TABLE.ToggleDrawn" }}">
                        <i class="fas {{#if result.drawn}}fa-lock{{else}}fa-unlock{{/if}} fa-fw"></i>
                    </a>
                    <input type="hidden" name="results.{{i}}.drawn" value="{{result.drawn}}" data-dtype="Boolean"/>
                    <a class="delete-result" title="{{ localize "TABLE.ResultDelete" }}">
                        <i class="fas fa-trash fa-fw"></i>
                    </a>
                </div>
                {{/if}}
            </li>
            {{/each}}
        </ol>
    </section>

    <!-- Roll Table Footer -->
    <footer class="sheet-footer flexrow">
        {{#if owner}}
        <button class="submit" type="submit"><i class="fas fa-save"></i> {{ localize "TABLE.Update" }}</button>
        <button class="reset" type="button"><i class="fas fa-undo"></i> {{ localize "TABLE.Reset" }}</button>
        {{/if}}
        <button class="roll" type="button"><i class="fas fa-dice-d20"></i> {{ localize "TABLE.Roll" }}</button>
    </footer>
</form>

