<div id="number-lock">
    <h1>{{general.label}}</h1>
    {{#if general.description}}<p class="notes">{{{general.description}}}</p>{{/if}}
    <input type="password" name="currentCode" id="" value="{{currentCode}}">
    <div class="keypad-grid">
        <button class="keypad-button" style="{{#if keypad-1.isImage}}background-image: url('{{keypad-1.value}}');{{/if}}" data-value="1">{{#unless keypad-1.isImage}}{{{keypad-1.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-2.isImage}}background-image: url('{{keypad-2.value}}');{{/if}}" data-value="2">{{#unless keypad-2.isImage}}{{{keypad-2.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-3.isImage}}background-image: url('{{keypad-3.value}}');{{/if}}" data-value="3">{{#unless keypad-3.isImage}}{{{keypad-3.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-4.isImage}}background-image: url('{{keypad-4.value}}');{{/if}}" data-value="4">{{#unless keypad-4.isImage}}{{{keypad-4.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-5.isImage}}background-image: url('{{keypad-5.value}}');{{/if}}" data-value="5">{{#unless keypad-5.isImage}}{{{keypad-5.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-6.isImage}}background-image: url('{{keypad-6.value}}');{{/if}}" data-value="6">{{#unless keypad-6.isImage}}{{{keypad-6.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-7.isImage}}background-image: url('{{keypad-7.value}}');{{/if}}" data-value="7">{{#unless keypad-7.isImage}}{{{keypad-7.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-8.isImage}}background-image: url('{{keypad-8.value}}');{{/if}}" data-value="8">{{#unless keypad-8.isImage}}{{{keypad-8.value}}}{{/unless}}</button>
        <button class="keypad-button" style="{{#if keypad-9.isImage}}background-image: url('{{keypad-9.value}}');{{/if}}" data-value="9">{{#unless keypad-9.isImage}}{{{keypad-9.value}}}{{/unless}}</button>
        <button class="keypad-button" data-value="clear"><i class="fa-solid fa-circle-xmark"></i></button>
        <button class="keypad-button" style="{{#if keypad-0.isImage}}background-image: url('{{keypad-0.value}}');{{/if}}" data-value="0">{{#unless keypad-0.isImage}}{{{keypad-0.value}}}{{/unless}}</button>
        <button class="keypad-button" data-value="back"><i class="fa-solid fa-delete-left"></i></button>
    </div>
</div>