{% if item.type in ['SelectField'] %}
    <br>
    {{ item.label(class=theme.form.select_label_class, style=theme.form.select_label_style) }}
    <br>
    <div class="input-group mb-3">
            {{ item(class=theme.form.select_class, type=theme.form.select_type, style=theme.form.select_style)}}
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#{{ item.name }}SearchModal">Search</button>
    </div>
    <div class="modal fade" id="{{ item.name }}SearchModal" tabindex="-1" aria-labelledby="{{ item.name }}SearchLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="{{ item.name }}SearchLabel">Search {{ item.label.text }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text"
                        name="modalReqArg"
                        id="searchInput{{ item.name }}" 
                        class="form-control" 
                        placeholder="Search for {{ item.label.text }}..." 
                        hx-get="search/{{ item.name }}" 
                        hx-trigger="keyup changed delay:500ms" 
                        hx-target="#{{ item.name }}Results"> 
                    <div id="{{ item.name }}Results"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
{% endif %}