{{> partials/text}}
<div>
    <label for="select">{{label}}</label>
    <select id="select">
        <option value="{{init}}">{{init}}</option>
        {{#options}}
            <option value="{{.}}">{{.}}</option>
        {{/options}}
        {{#other}}
            <option value="other">Other</option>
        {{/other}}
    </select>
    {{#other}}
        <input id="input" type="text" value="{{init}}" class="d-none">
    {{/other}}
</div>
<div class="center">
    <button onclick="printFinalValue()" class="bg-green" autofocus>OK</button>
    <button onclick="window.terminate()" class="bg-red">Cancel</button>
</div>

{{> partials/timeout}}

{{^other}}
    <script>
        function printFinalValue() {
            printValue('select');
        }
    </script>
{{/other}}

{{#other}}
    <script>
        function printFinalValue() {
            let select = document.getElementById('select').value;
            if (select === "other") {
                printValue('input');
            } else {
                printAndTerminate(select);
            }
        }

        document.getElementById('select').addEventListener("change", function () {
            let input = document.getElementById('input');
            if (this.value === "other") {
                input.classList.remove('d-none');
                input.focus();
                input.select();
            } else {
                input.classList.add('d-none');
            }
        });

        document.getElementById('input').addEventListener("keyup", printOnEnter);
    </script>
{{/other}}
