<div class="form-group">
    <div class="col-sm-4">
        <label>
            {% if link %}
            <a onclick="{{link}}">{{field.label}}</a>
            {% else %}
                {% if link2 %}
                <a onclick="open2('{{link2}}');">{{field.label}}</a>
                {% else %}
                {{field.label}}
                {% endif %}
            {% endif %}
        </label>
    </div>
    {% if field.autocomplete_url %}
    <div class="col-sm-8">
        <input id="{{field.key}}" name="{{field.key}}"
               class="form-control"
               type="text"
               value="{{field.value_as_str}}"
               {% if field.disabled %}disabled{% endif %}
               {% if field.autocomplete %}autocomplete="{{field.autocomplete}}"{% endif %}/>
        {% for error in field.errors %}
        <div class="red">{{ error }}</div>
        {% endfor %}
    </div>
    <script>
        $(document).ready(function(){
            $("#{{field.key}}").autocomplete({
                source: "/{{field.autocomplete_url}}/",
                minLength: 2,
                open: function(){
                    setTimeout(function () {
                        $('.ui-autocomplete').css('z-index', 99);
                    }, 0);
                }
              });
            {{field.key}}_old_value = null;
            document.getElementById('{{field.key}}').onfocus = function() {
                {{field.key}}_old_value = document.getElementById('{{field.key}}').value
            };
            document.getElementById('{{field.key}}').addEventListener('keydown', function(event){
                if (event.key === "Escape") {
                    value = {{field.key}}_old_value
                    if (value != null && value != document.getElementById("{{field.key}}").value) {
                        document.getElementById('{{field.key}}').value = {{field.key}}_old_value
                        event.stopPropagation();
                    }
                }
            });
        });
    </script>
    {% else %}
    <div class="col-sm-8">
        <input name="{{field.key}}"
               class="form-control"
               type="text"
               value="{{field.value_as_str}}"
               {% if field.disabled %}disabled{% endif %}
               {% if field.autocomplete %}autocomplete="{{field.autocomplete}}"{% endif %}/>
        {% for error in field.errors %}
        <div class="red">{{ error }}</div>
        {% endfor %}
    </div>
    {% endif %}
</div>
