<form>
    <!-- Macro List -->
    <datalist id="toRunMacro">
        {{#each macros}}
        <option value="{{this}}">
        {{/each}}
    </datalist>  

    <div class="form-group">
        <label>Macro Name</label>
        <input name="name" type="text" value="{{documentName}} Macro"></input>
    </div>
    <br>
    <h3>Targeting</h3>
    <div class="form-group">
        <label>Target</label>
        <select name="target.method" data-dtype="string">
            {{#each targetingOptions}}
            <option value="{{this.value}}" title="{{this.title}}">{{this.label}}</option>
            {{/each}}
        </select>
    </div>
    <div class="form-group">
        <label>Scope</label>
        <select name="target.scope" data-dtype="string">
            {{#if selectScopeEnabled}}
            <option value="selected" selected="selected">Selected</option>
            {{/if}}
            {{#if selectable}}
            <option value="scene">Active Scene</option>
            {{/if}}
            <option value="world">World</option>
        </select>
    </div>
    <div class="taggerControl" hidden>
        <div class="form-group">
            <label>Tags</label>
            <input name="target.tagger.tags" type="text" value=""></input>
        </div>
        <div class="form-group">
            <label>Must match</label>
            <select name="target.tagger.match" data-dtype="string">
                <option value="any" selected="selected">Any Tag</option>
                <option value="all">All Tags</option>
            </select>
        </div>
    </div>
    <div hidden>
        <label><b>Search fields:</b></label>
        <textarea name="target.fields" style="width:100%; height: 100px;">{{fields}}</textarea>
    </div>
    <br>
    <h3>Action</h3>
    <div class="form-group">
        <label>Action</label>
        <select name="method" data-dtype="string">
            <option value="update" selected="selected">Update</option>
            <option value="toggle">Toggle</option>
            <option value="massEdit">Open Mass Edit Form</option>
            <option value="delete">Delete</option>
        </select>
    </div>
    <div class="toggleControl" hidden>
        <div class="form-group">
            <label>Toggle Detection</label>
            <select name="toggle.method" data-dtype="string">
                <option value="field" selected="selected">Field Compare</option>
                <option value="flag">Flag</option>
            </select>
        </div>
        <br>
    </div>
    {{#if hiddenControl}}
    <div class="form-group fields">
        <div style="text-align: right;">
            <a><img class="toggleVisibility" src="icons/svg/cowled.svg" width="25" height="25" title="Toggle Visibility State"></a>
        </div>
    </div>
    {{/if}}
    <div class="toggleControl" hidden><label><b>Toggle ON</b></label></div>
    <div>
        {{#if hasRandom}}
        <a class="randomize" title="Randomized Fields"><i class="fas fa-dice"></i></a>
        <input name="randomize" type="text" value="{{randomize}}" hidden>
        {{/if}}

        {{#if hasAddSubtract}}
        <a class="addSubtract" title="Add/Subtract Fields"><i class="fas fa-calculator-alt"></i></a>
        <input name="addSubtract" type="text" value="{{addSubtract}}" hidden>
        {{/if}}
    </div>
    <textarea class="fields" name="fields" style="width:100%; height: 200px;">{{fields}}</textarea>
    <div class="form-group slim fields">
        <label>Run</label>
        <div class="form-fields">
            <label>Macro</label>
            <input list="toRunMacro" name="macro.name">
            {{#if selectable}}
            <label>Select Targets</label>
            <input type="checkbox" name="macro.select" />
            {{/if}}
        </div>
    </div>
    <div class="toggleControl" hidden>
        <label><b>Toggle OFF</b></label>
        <div>
            {{#if hasRandom}}
            <a class="togglerandomize" title="Randomized Fields"><i class="fas fa-dice"></i></a>
            <input name="toggle.randomize" type="text" value="{{randomize}}" hidden>
            {{/if}}
            {{#if hasAddSubtract}}
            <a class="toggleaddSubtract" title="Add/Subtract Fields"><i class="fas fa-calculator-alt"></i></a>
            <input name="toggle.addSubtract" type="text" value="{{addSubtract}}" hidden>
            {{/if}}
        </div>
        <textarea name="toggle.fields" style="width:100%; height: 200px;"></textarea>
        <div class="form-group slim">
            <label>Run</label>
            <div class="form-fields">
                <label>Macro</label>
                <input list="toRunMacro" name="toggle.macro.name">
                {{#if selectable}}
                <label>Select Targets</label>
                <input type="checkbox" name="toggle.macro.select" />
                {{/if}}
            </div>
        </div>
    </div>

    {{#if hasMEControls}}
    <div class="form-group" style="outline-style: dotted; color: orangered;">
        <label>Note: Including addition, subtraction, randomization, or special fields such TMFX Presets and DDTint will result in the macro having a dependency on Mass Edit.</label>
    </div>
    {{/if}}

    <footer class="sheet-footer flexrow">
        <button type="submit">Generate Macro</button>
    </footer>
</form>