<div id="token-action-hud-form" class="standard-form">
    <nav class="sheet-tabs tabs" style="flex: none;">
        <a class="item active" data-action="tab" data-group="primary" data-tab="items">
            <i class="fa-solid fa-user"></i>
            {{localize "tokenActionHud.form.hud.items"}}
        </a>
        <a class="item" data-action="tab" data-group="primary" data-tab="other">
            <i class="fa-solid fa-gear"></i>
            {{localize "tokenActionHud.form.hud.otherSettings"}}
        </a>
    </nav>
    <div class="standard-form scrollable">
        <section class="tab active" data-group="primary" data-tab="items">
            <div class="tah-dialog-col-group">
                <div class="tah-dialog-detail">
                    <label>{{{localize "tokenActionHud.form.hud.groupDetail"}}}</label>
                </div>
                <div>{{localize "tokenActionHud.form.hud.selectedItems"}}</div>
                <div class="tah-dialog-col-group">
                    <input
                        name="tah-dialog-tagify"
                        class="tah-dialog-tagify"
                        placeholder="{{placeholder}}"
                    />
                </div>
                <div class="tah-dialog-col-group">
                    <button type="button" id="tah-dialog-unselect-all" class="bright tags--removeAllBtn" data-action="unselectAllTags">
                        <i class="fa-regular fa-filter-slash"></i>{{localize "tokenActionHud.form.hud.unselectAll"}}
                    </button>
                </div>
            </div>
        </section>
        <section class="tab" data-group="primary" data-tab="other">
            <div class="tah-dialog-col-group">
                <div class="form-group">
                    <label>{{localize "tokenActionHud.form.group.image.label"}}</label>
                    <div class="form-fields">
                        <file-picker id="image" name="image" type="image" value="{{settings.image}}"></file-picker>
                    </div>
                    <p class="hint">{{localize "tokenActionHud.form.group.image.hint"}}</p>
                </div>
                <div class="form-group slim">
                    <label>{{localize "tokenActionHud.form.group.topLevel.showTitle.label"}}</label>
                    <div class="form-fields">
                        <input type="checkbox" name="showTitle" {{~#if settings.showTitle~}}checked{{~/if~}}/>
                    </div>
                    <p class="hint">{{localize "tokenActionHud.form.group.topLevel.showTitle.hint"}}</p>
                </div>
                <div class="form-group">
                    <label>
                        {{localize "tokenActionHud.form.group.customWidth.label"}}
                        <span class="units">{{localize "tokenActionHud.form.group.customWidth.units"}}</span>
                    </label>
                    <div class="form-fields">
                        <input type="number" name="customWidth" value="{{settings.customWidth}}" />
                    </div>
                    <p class="hint">{{localize "tokenActionHud.form.group.topLevel.customWidth.hint"}}</p>
                </div>
                <div class="form-group slim">
                    <label>{{localize "tokenActionHud.form.group.grid.label"}}</label>
                    <div class="form-fields">
                        <input type="checkbox" name="grid" {{~#if settings.grid}}checked{{~/if~}}/>
                    </div>
                    <p class="hint">{{localize "tokenActionHud.form.group.grid.hint"}}</p>
                </div>
                <div class="form-group">
                    <label>{{localize "tokenActionHud.form.group.characterCount.label"}}</label>
                    <div class="form-fields">
                        <input type="number" name="characterCount" placeholder="No limit" value="{{settings.characterCount}}" />
                    </div>
                    <p class="hint">{{localize "tokenActionHud.form.group.characterCount.hint"}}</p> 
                </div>
            </div>
        </section>
    </div>
    <footer class="form-footer" data-application-part="footer">
        <button type="submit" class="save-button">
            <i class="fas fa-solid fa-floppy-disk"></i>{{localize "tokenActionHud.saveAndClose"}}
        </button>
    </footer>
</div>