[viewBag]
==
{% if justSelect == 1 %}
    <select class="destination-select form-select" onchange="redirToDestination(this);">
        <option data-select="Search more destinations" value="" selected="selected">Search more destinations</option>
        {% for product in products %}
            <option value="{{ product.id }}">{{ product.title }}</option>
        {% endfor %}
    </select>
{% else %}
<section class="destinations-area collections-area lightbg">
    <div class="search-form wow fadeInUp lightbg">
        <select class="destination-select form-select" onchange="redirToDestination(this);">
            <option data-select="Search more destinations" value="" selected="selected">Search more destinations</option>
            {% for product in products %}
                <option value="{{ product.id }}">{{ product.title }}</option>
            {% endfor %}
        </select>
     </div>
</section>
{% endif %}
{% put scripts %}
<script>
    function redirToDestination(elem){
        switch(elem.value){
            {% for product in products %}
            case '{{ product.id }}':
                window.location = '/travel/{{ product.catslug }}/{{ product.slug }}/';
            break;
            {% endfor %}
            default:
                alert('Select a destination');
            break;
        }//switch
    }//function

    // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
        $(".destination-select").select2({
            theme: "bootstrap-5",
            width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
            placeholder: $( this ).data( 'placeholder' ),
        });
        {% if not justSelect == 1 %}
        $('.select2-selection__arrow').append('<button type="button" class="explore-btn search-btn" style="right: 0px">Search</button>');
        {% endif %}
        $(".selection").css({"width": "100%"});
    });
</script>
{% endput %}