<nav class="trigger-tabs sheet-tabs tabs" data-group="triggers">
    <a class="item" data-tab="trigger-setup"><i class="fas fa-cog"></i> {{ localize "MonksActiveTiles.tabs.Setup" }}</a>
    <a class="item" data-tab="trigger-actions"><i class="fas fa-running"></i> {{ localize "MonksActiveTiles.tabs.Actions" }}</a>
    <a class="item" data-tab="trigger-images"><i class="fas fa-image"></i> {{ localize "MonksActiveTiles.tabs.Images" }}</a>
</nav>

<div class="tab matt-tab" data-tab="trigger-setup">
    <p class="notes">{{ localize "MonksActiveTiles.TriggersHint" }}</p>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.Active" }}</label>
        <div class="form-fields">
            <input type="checkbox" name="flags.monks-active-tiles.active" {{ checked data.flags.monks-active-tiles.active }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.History" }}</label>
        <div class="form-fields">
            <button class="view-history" type="button" style="height: 20px; line-height: 15px; white-space: nowrap;">{{ localize "MonksActiveTiles.history.ViewHistory" }}</button>
            <button class="view-variables" type="button" style="height: 20px; line-height: 15px; white-space: nowrap;">{{ localize "MonksActiveTiles.history.ViewVariables" }}</button>
            <div></div>
            <input class="record-history" type="checkbox" name="flags.monks-active-tiles.record" {{ checked data.flags.monks-active-tiles.record }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.RestrictedTo" }}</label>
        <div class="form-fields">
            <select name="flags.monks-active-tiles.restriction" data-dtype="String">
                {{ selectOptions triggerRestriction selected=data.flags.monks-active-tiles.restriction }}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.ControlledBy" }}</label>
        <div class="form-fields">
            <select name="flags.monks-active-tiles.controlled" data-dtype="String">
                {{ selectOptions triggerControlled selected=data.flags.monks-active-tiles.controlled }}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.When" }}</label>
        <div class="form-fields">
            <input type="hidden" name="flags.monks-active-tiles.trigger" value="{{triggerValues}}" />
            <div class="multiple-dropdown-select">
                <div class="multiple-dropdown flexrow">
                    <div class="multiple-dropdown-content">
                        {{#each triggerNames}}
                        <div class="multiple-dropdown-option flexrow" data-id="{{this.id}}"><span>{{this.name}}</span> <div class="remove-option">&times;</div></div>
                        {{/each}}
                    </div>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <ul class="dropdown-list">
                    {{#each triggers}}
                    <li class="multiple-dropdown-item{{#if this.selected}} selected{{/if}}" value="{{this.id}}">
                        {{this.name}}
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>

    <div class="form-group" {{#unless preventPaused}} style="display: none;" {{/unless}}>
        <label>{{ localize "MonksActiveTiles.AllowWhenPaused" }}</label>
        <div class="form-fields" style="flex: 0 0 50px;">
            <input type="checkbox" name="flags.monks-active-tiles.allowpaused" {{ checked data.flags.monks-active-tiles.allowpaused }}>
        </div>
    </div>

    <div class="form-group usealpha">
        <label>{{ localize "MonksActiveTiles.UseTransparency" }}</label>
        <div class="form-fields" style="flex: 0 0 50px;">
            <input type="checkbox" name="flags.monks-active-tiles.usealpha" {{ checked data.flags.monks-active-tiles.usealpha }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.HoverPointer" }}</label>
        <div class="form-fields" style="flex: 0 0 50px;">
            <input type="checkbox" name="flags.monks-active-tiles.pointer" {{ checked data.flags.monks-active-tiles.pointer }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.TokenVision" }}</label>
        <div class="form-fields" style="flex: 0 0 50px;">
            <input type="checkbox" name="flags.monks-active-tiles.vision" {{ checked data.flags.monks-active-tiles.vision }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.PerToken" }}</label>
        <div class="form-fields" style="flex: 0 0 50px;">
            <input type="checkbox" class="per-token" name="flags.monks-active-tiles.pertoken" {{ checked data.flags.monks-active-tiles.pertoken }}>
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.MinRequired" }}</label>
        <div class="form-fields" style="flex:0 0 100px;">
            <input type="number" style="text-align:right;" name="flags.monks-active-tiles.minrequired" min="0" value="{{data.flags.monks-active-tiles.minrequired}}">
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.Cooldown" }}</label>
        <div class="form-fields" style="flex:0 0 100px;">
            <input type="number" style="text-align:right;" name="flags.monks-active-tiles.cooldown" min="0" value="{{data.flags.monks-active-tiles.cooldown}}">
        </div>
    </div>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.ChanceTrigger" }}</label>
        <div class="form-fields">
            {{ rangePicker name="flags.monks-active-tiles.chance" value=data.flags.monks-active-tiles.chance min="0" max="100" step="1" }}
        </div>
    </div>
</div>

<div class="tab matt-tab" data-tab="trigger-actions">
    {{#if sounds}}
    <ol class="items-list sounds-list" data-collection="sounds">
        <li class="item-header flexrow">
            <h3 class="item-name flexrow">{{ localize "MonksActiveTiles.Sounds" }}</h3>
            <div class="item-controls flexrow"></div>
        </li>

        <ol class="item-list">
            {{#each sounds}}
            <li class="item flexrow " data-id="{{this.id}}" draggable="true">
                <div class="item-name flexrow">
                    <h4 style="white-space: normal;">{{this.name}}</h4>
                </div>

                <div class="item-controls flexrow">
                    <a class="item-control action-stop" title="Stop sound playing"><i class="fas fa-stop"></i></a>
                </div>
            </li>
            {{/each}}
        </ol>
    </ol>
    {{/if}}

    <ol class="items-list action-items" data-collection="actions">
        <li class="item-header flexrow">
            <h3 class="item-name flexrow">{{ localize "MonksActiveTiles.Actions" }}</h3>

            <div class="item-controls flexrow">
                <a class="item-control action-create" title="{{ localize "MonksActiveTiles.CreateNewAction" }}" data-type="objective">
                    <i class="fas fa-plus"></i> {{ localize "MonksActiveTiles.Add" }}
                </a>
            </div>
        </li>

        <ol class="item-list" style="position: relative;">
            {{#each actions}}
            <li class="item flexrow " data-id="{{this.id}}" draggable="true">
                {{#each this.landings}}
                <div class="landing-marker" marker="{{this}}">&nbsp;</div>
                {{/each}}
                <div class="item-name flexrow{{#if this.disabled}} disabled{{/if}}{{#if this.landingStop}} landing-stop{{/if}}" {{#if this.marker}}marker="{{this.marker}}"{{/if}}>
                    <h4 style="white-space: normal;">{{{this.content}}}</h4>
                </div>

                <div class="item-controls flexrow">
                    <a class="item-control action-edit" title="{{ localize "MonksActiveTiles.EditAction" }}"><i class="fas fa-edit"></i></a>
                    <a class="item-control action-delete" title="{{ localize "MonksActiveTiles.DeleteAction" }}"><i class="fas fa-trash"></i></a>
                </div>
            </li>
            {{/each}}
        </ol>
    </ol>
</div>

<div class="tab matt-tab" data-tab="trigger-images">
    <p class="notes">{{ localize "MonksActiveTiles.TriggersImages" }}</p>

    <div class="form-group">
        <label>{{ localize "MonksActiveTiles.ShownImage" }}</label>
        <div class="form-fields">
            <input type="number" style="text-align: right; flex: 0 0 80px;" name="flags.monks-active-tiles.fileindex" min="0" value="{{index}}">
        </div>
    </div>

    <ol class="files-list items-list" data-collection="files">
        <li class="item-header flexrow">
            <div class="item-controls" style="text-align: right;flex: 1;">
                <a title="Browse Folder" class="browse-folder" style="margin-right: 12px;"><i class="fas fa-folder"></i> Folder</a>
				<button type="button" class="add-folder" data-target="_folder-list" style="display: none;"></button>
				<a title="Browse Files" class="browse-files" style="margin-right: 12px;"><i class="fas fa-plus"></i> Add</a>
				<button type="button" class="add-image" data-target="_file-list" style="display: none;"></button>
            </div>
            <input type="hidden" class="filepath" name="_file-list">
            <input type="hidden" class="folderpath" name="_folder-list">
        </li>
        <ul class="file-list">
            {{#each files}}
            <li data-id="{{this.id}}" data-collection="files" class="flexrow file-row item" draggable="true">
                <input type="hidden" class="filepath" name="files.{{this.id}}.name" value="{{this.name}}">
                <div class="image-name" title="{{this.name}}">{{this.name}}</div>
                <a class="edit-file"><i class="fas fa-edit fa-sm"></i></a>
                <button type="button" class="add-image" data-target="files.{{this.id}}.name" style="display: none;"></button>
                <a class="delete-file"><i class="fas fa-trash fa-sm"></i></a>
            </li>
            {{/each}}
        </ul>
    </ol>
</div>