Mini Kabibi Habibi

<div data-options="dxView : { name: 'FindFlight', title: 'Find Flight', layout: 'find-flights' } " >
    
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >   
        <div class="layout-content-margin">
            <!-- ko if: flightList().length -->
            <h1 class="find-flight-header">
                <span data-bind="text: countFlights"></span>
                Flights found for you
            </h1>
            
            <div class="flight-list-header">
                <div class="grid_6">
                    <div class="find-trip-leave">Leave</div>
                </div>
                <div class="grid_6">
                    <div class="find-trip-return">Return</div>
                </div>
                <div class="grid_6">
                    <div data-bind="click: sortByPrice, attr: { 'class': 'price find-trip-price-sort ' + sortClass() }">Cost</div>
                </div>
            </div>
             
            
            <div class="find-flight-list" data-bind="foreach: flightList">
                <div class="flight" data-bind="listHover: { href: id, listNodeClass: 'find-flight-list', popupNodeClass: 'flight-list-popup' }">
                    <div class="grid_6">
                        <div data-bind="text: from.name + ' ('+ from.code +')'"></div>
                        <div data-bind="if: connections">
                            <div data-bind="foreach: connections" class="connections">
                                <div data-bind="text: name + ' ('+ code +')'"></div>
                            </div>
                        </div>
                        <div data-bind="text: to.name + ' ('+ to.code +')'"></div>
                    </div>
                    <div class="grid_6">
                        <div data-bind="text: to.name + ' ('+ to.code +')'"></div>
                            <div data-bind="foreach: connectionsReturn" class="connections">
                                <div data-bind="text: name + ' ('+ code +')'"></div>
                            </div>
                        <div data-bind="text: from.name + ' ('+ from.code +')'"></div>
                    </div>
                    <div class="grid_6">
                         <div class="price">
                             <span data-bind="text: price"></span>
                         </div>
                    </div>
                </div>
            </div>
            

            <div data-bind="click: showMoreFlights, visible: visibleMoreLink" class="show-more-flights">Show more flights</div>
            <!-- /ko -->

            <!-- ko ifnot: flightList().length -->
            
                <!-- ko if: notResults() -->
                    <div class="find-flight-header">No results for your search</div>
                <!-- /ko -->
                
                <!-- ko ifnot: notResults() -->
                    <div class="find-flight-header">Searching...</div>
                    <div class="find-flight-loading"></div>
                <!-- /ko -->
            
            <!-- /ko -->

        </div>
        </div>
        <div class="clear"></div>

    <div data-options="dxContent : { targetPlaceholder: 'left-side-bar-content' } " > 
        <div data-bind="visible: leftSideBarVisible">
        <div class="find-flight-side-bar">
            <h1>Search criteria</h1>
            
            <div class="vertical-offset">
                <div><strong>From</strong></div>
                <div data-options="dxViewPlaceholder : { viewName: '_fromAirport' } " ></div>
            </div>

            <div class="vertical-offset">
                <div><strong>To</strong></div>
                <div data-options="dxViewPlaceholder : { viewName: '_toAirport' } " ></div>
            </div>

            <div class="vertical-offset">
                <div><strong>Leaving</strong></div>
                <div class="find-flight-date">
                    <div data-options="dxViewPlaceholder : { viewName: '_outboundDate' } " ></div>
                </div>
            </div>

            <div class="vertical-offset">
                <div><strong>Returning</strong></div>
                <div class="find-flight-date">
                    <div data-options="dxViewPlaceholder : { viewName: '_inboundDate' } " ></div>
                </div>
            </div>

            <div class="vertical-offset">
                <div><strong>Cost</strong></div>
                <div class="find-flight-slider-wrap">
                    <div class="find-trip-sidebar-rangeslider" data-bind="jqueryui: {
                                                                            widget: 'slider',
                                                                            options: {
                                                                                range: true,
                                                                                min: 0,
                                                                                max: maxCost(),
                                                                                step: 0.1,
                                                                                values: [costStart(), costEnd()],
                                                                                slide: changeCost,
                                                                                stop: filterFlights
                                                                            }}">

                    </div>
                    <span data-bind="text: costStartFormated" class="costStart"></span>
                    <span data-bind="text: costEndFormated"></span>
                </div>
            </div>
            
            <div class="vertical-offset">
                <div><strong>Airline</strong></div>
                <select data-bind="options: airlines, value: selectedAirline, optionsText: 'name', optionsTextId: 'code', optionsCaption: 'Choose...'"></select>
            </div>

            <div class="vertical-offset">
                <div><strong>Class Of Seat</strong></div>
                <select data-bind="options: classOfSeatList, value: classOfSeatSelected"></select>
            </div>

            <div class="vertical-offset">
                <div><strong>Leave Time Of Day</strong></div>
                <div class="find-flight-slider-wrap">
                    <div class="find-trip-sidebar-rangeslider" data-bind="jqueryui: {
                                                                            widget: 'slider',
                                                                            options: {
                                                                                range: true,
                                                                                min: 0,
                                                                                max: 24,
                                                                                values: [leaveTimeOfDayStart(), leaveTimeOfDayEnd()],
                                                                                stop: filterFlights,
                                                                                slide: changeLeaveTimeOfDay
                                                                            }}">

                    </div>
                    <span data-bind="text: leaveTimeFormat12First" style="padding-right: 10px;"></span>
                    <span data-bind="text: leaveTimeFormat12Last"></span>
                </div>
            </div>

            <div class="vertical-offset">
                <div><strong>Return Time Of Day</strong></div>
                <div class="find-flight-slider-wrap">
                    <div class="find-trip-sidebar-rangeslider" data-bind="jqueryui: {
                                                                            widget: 'slider',
                                                                            options: {
                                                                                range: true,
                                                                                min: 0,
                                                                                max: 24,
                                                                                values: [returnTimeOfDayStart(), returnTimeOfDayEnd()],
                                                                                stop: filterFlights,
                                                                                slide: changeReturnTimeOfDay
                                                                            }}">
                    </div>
                    <span data-bind="text: returnTimeFormat12First" style="padding-right: 10px;"></span>
                    <span data-bind="text: returnTimeFormat12Last"></span>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>