{% macro render_dropdown(input_id, dropdown_id, placeholder, label=None, help_text=None, allow_custom=False, show_refresh=False, refresh_aria_label="Refresh options", data_setting_key=None, data_initial_value=None) %}
<div class="form-group">
    {% if label %}
    <label for="{{ input_id }}" id="{{ input_id }}-label">{{ label }}</label>
    {% endif %}

    {% if show_refresh %}
    <div class="ldr-custom-dropdown-with-refresh">
        <div class="ldr-custom-dropdown" id="{{ dropdown_id }}">
            <input type="text"
                   id="{{ input_id }}"
                   data-key="{{ data_setting_key or input_id }}"
                   {% if data_initial_value %}data-initial-value="{{ data_initial_value }}"{% endif %}
                   class="ldr-custom-dropdown-input"
                   placeholder="{{ placeholder }}"
                   autocomplete="off"
                   role="combobox"
                   aria-haspopup="listbox"
                   aria-expanded="false"
                   aria-autocomplete="list"
                   aria-controls="{{ dropdown_id }}-list"
                   {% if help_text %}aria-describedby="{{ input_id }}-help"{% endif %}
                   {% if label %}aria-labelledby="{{ input_id }}-label"{% endif %}>
            <!-- Hidden input that will be included in form submission -->
            <input type="hidden" name="{{ input_id }}" id="{{ input_id }}_hidden" value="{{ data_initial_value or '' }}">
            <div class="ldr-custom-dropdown-list" id="{{ dropdown_id }}-list" role="listbox" {% if label %}aria-labelledby="{{ input_id }}-label"{% endif %}></div>
        </div>
        <button type="button"
                class="ldr-custom-dropdown-refresh-btn"
                id="{{ input_id }}-refresh"
                aria-label="{{ refresh_aria_label }}">
            <i aria-hidden="true" class="fas fa-sync-alt" ></i>
        </button>
    </div>
    {% else %}
    <div class="ldr-custom-dropdown" id="{{ dropdown_id }}">
        <input type="text"
               id="{{ input_id }}"
               data-key="{{ data_setting_key or input_id }}"
               {% if data_initial_value %}data-initial-value="{{ data_initial_value }}"{% endif %}
               class="ldr-custom-dropdown-input"
               placeholder="{{ placeholder }}"
               autocomplete="off"
               role="combobox"
               aria-haspopup="listbox"
               aria-expanded="false"
               aria-autocomplete="list"
               aria-controls="{{ dropdown_id }}-list"
               {% if help_text %}aria-describedby="{{ input_id }}-help"{% endif %}
               {% if label %}aria-labelledby="{{ input_id }}-label"{% endif %}>
        <!-- Hidden input that will be included in form submission -->
        <input type="hidden" name="{{ input_id }}" id="{{ input_id }}_hidden" value="{{ data_initial_value or '' }}">
        <div class="ldr-custom-dropdown-list" id="{{ dropdown_id }}-list" role="listbox" {% if label %}aria-labelledby="{{ input_id }}-label"{% endif %}></div>
    </div>
    {% endif %}

    {% if help_text %}
    <span class="ldr-input-help" id="{{ input_id }}-help">{{ help_text }}</span>
    {% endif %}
</div>
{% endmacro %}
