<form>
    <div class="dialog-content">
        <div class="form-group">
            <label>{{localize "GlobalProgressClocks.CreateDialog.Name"}}</label>
            <div class="form-fields">
                <input type="text" name="name" value="{{entry.name}}" {{#unless clock}}autofocus{{/unless}} />
            </div>
        </div>
        {{#if (or entry (eq type "points"))}}
            <div class="form-group">
                <label>{{localize "GlobalProgressClocks.CreateDialog.Value"}}</label>
                <div class="form-fields">
                    <input type="number" name="value" value="{{entry.value}}" autofocus />
                </div>
            </div>
        {{/if}}

        {{#if (eq type "tracker")}}
            <div class="form-group">
                <label>{{localize "GlobalProgressClocks.CreateDialog.Size"}}</label>
                <div class="form-fields">
                    <div class="dropdown-wrapper">
                        {{ numberInput defaultSize name="max" step=1 min=1 max=12 }}
                        <ul class="dropdown">
                            {{#each trackerSizes as |size|}}
                                <li data-value={{size}}>{{size}}</li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </div>
        {{/if}}
        {{#if (eq type "clock")}}
            <div class="form-group">
                <label>{{localize "GlobalProgressClocks.CreateDialog.Size"}}</label>
                <div class="form-fields">
                    <div class="dropdown-wrapper">
                        {{#if entry.max}}
                            {{ numberInput entry.max name="max" step=1 min=1 max=max_size }}
                        {{else}}
                            {{ numberInput 4 name="max" step=1 min=1 max=max_size }}
                        {{/if}}
                        <ul class="dropdown">
                            {{#each presetSizes as |size|}}
                                <li data-value={{size}}>{{size}}</li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </div>
        {{/if}}
        {{#if clockColors}}
            <div class="form-group">
                <label>{{localize "GlobalProgressClocks.CreateDialog.Color"}}</label>
                <select name="colorId">
                    {{selectOptions clockColors selected=entry.colorId blank=(localize "GlobalProgressClocks.CreateDialog.Default")}}
                </select>
            </div>
        {{/if}}
        <div class="form-group">
            <label for="clock{{entry.id}}-add-private">{{localize "GlobalProgressClocks.CreateDialog.Private"}}</label>
            <div class="form-fields">
                <input id="clock{{entry.id}}-add-private" type="checkbox" name="private" {{checked entry.private}}/>
            </div>
        </div>
    </div>
    <div class="dialog-buttons">
        <button class="dialog-button" data-button="yes">
            <i class="fas fa-check"></i>
            {{localize "Confirm"}}
        </button>
        <button class="dialog-button" data-button="no">
            <i class="fas fa-times"></i>
            {{localize "Cancel"}}
        </button>
    </div>
</form>
