keeweb/app/templates/generator-presets.hbs

<div class="gen-ps">
    <div class="back-button">
        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left back-button__post"></i>
    </div>
    <div class="scroller">
        <div class="gen-ps__content">
            <h1>{{res 'genPsTitle'}}</h1>
            <select class="gen-ps__list input-base">
                {{#each presets as |ps|}}
                    <option value="{{ps.name}}" {{#ifeq ps ../selected}}selected{{/ifeq}}>{{#if ps.builtIn}}* {{/if}}{{ps.title}}</option>
                {{/each}}
            </select>
            <div class="gen-ps__field">
                <input type="checkbox" class="input-base" id="gen-ps__check-enabled" {{#unless selected.disabled}}checked{{/unless}} />
                <label for="gen-ps__check-enabled">{{res 'genPsEnabled'}}</label>
            </div>
            <div class="gen-ps__field">
                <input type="checkbox" class="input-base" id="gen-ps__check-default" {{#if selected.default}}checked{{/if}} />
                <label for="gen-ps__check-default">{{res 'genPsDefault'}}</label>
            </div>
            <div class="gen-ps__field">
                <label for="gen-ps__field-title">{{Res 'name'}}:</label>
                <input type="text" class="input-base" id="gen-ps__field-title" value="{{selected.title}}"
                       size="50" maxlength="64" required {{#if selected.builtIn}}readonly{{/if}} />
            </div>
            <div class="gen-ps__field">
                <label for="gen-ps__field-length">{{res 'genPsDefaultLength'}}:</label>
                <input type="text" class="input-base" id="gen-ps__field-length" value="{{selected.length}}"
                       size="50" maxlength="3" required pattern="\d+" {{#if selected.builtIn}}readonly{{/if}} />
            </div>
            {{#each ranges as |range|}}
            <div class="gen-ps__field">
                <input type="checkbox" class="input-base gen-ps__check-range" id="gen-ps__check-{{range.name}}"
                       data-range="{{range.name}}"
                    {{#if range.enabled}}checked{{/if}} {{#if ../selected.builtIn}}disabled{{/if}} />
                <label for="gen-ps__check-{{range.name}}">{{range.title}}<span class="gen-ps__sample"> {{range.sample}}</span></label>
            </div>
            {{/each}}
            <div class="gen-ps__field">
                <label for="gen-ps__field-include">{{res 'genPsInclude'}}:</label>
                <input type="text" class="input-base" id="gen-ps__field-include" value="{{selected.include}}"
                       {{#if selected.builtIn}}readonly{{/if}} />
            </div>
            <div class="gen-ps__field">
                <label for="gen-ps__field-pattern">{{res 'genPsPattern'}}: <i class="fa fa-info-circle info-btn info-btn--pattern"></i></label>
                <div class="gen-ps__pattern-help hide">
                    <p>{{res 'genPsPatternHelp'}}</p>
                    <p>
                        <code>X</code> – {{res 'genPsAllRanges'}}<br/>
                        <code>A</code> – {{res 'genPsUpper'}}<br/>
                        <code>a</code> – {{res 'genPsLower'}}<br/>
                        <code>1</code> – {{res 'genPsDigits'}}<br/>
                        <code>*</code> – {{res 'genPsSpecial'}}<br/>
                        <code>[</code> – {{res 'genPsBrackets'}}<br/>
                        <code>Ä</code> – {{res 'genPsHigh'}}<br/>
                        <code>0</code> – {{res 'genPsAmbiguous'}}<br/>
                        <code>I</code> – {{res 'genPsIncluded'}}
                    </p>
                </div>
                <input type="text" class="input-base" id="gen-ps__field-pattern" value="{{selected.pattern}}"
                       {{#if selected.builtIn}}readonly{{/if}} />
            </div>
            <div class="gen-ps__field">
                <label>{{res 'genPsExample'}}:</label>
                <div class="gen-ps__example"></div>
            </div>
        </div>
    </div>
    <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
    <div class="gen-ps__buttons">
        <button class="gen-ps__btn-create">{{res 'genPsCreate'}}</button>
        {{#unless selected.builtIn}}<button class="gen-ps__btn-delete btn-error">{{res 'genPsDelete'}}</button>{{/unless}}
    </div>
</div>