Mini Kabibi Habibi

<div data-options="dxView : { name: 'HotDeals', layout: 'default' } " >
    <div class="hot-deals black-text" style="height:100%" data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div data-bind="dxToolbar: { items: [
            { align: 'left', widget: 'button', options: { iconSrc: 'images/back.png', clickAction: '#Index' }},
            { align: 'left', text: 'Hot Deals' },
            { align: 'right', html: '<a href=#Index class=logo></a>' }]}" class="hot-deals-header">
        </div>

        <div class="hot-deals-wrapper">
            <div class="hot-deals-content clearfix">
                <div class="hot-deals-left">
                    <div data-bind="visible: notResults"><h2>Not Found</h2></div>
                    <div data-bind="dxList: { items: flights, itemClickAction: flightItemClick }" style="height:100%">
                        <div data-options="dxTemplate : { name: 'item' } " >
                            <div class="flight" data-bind="css: { 'selected-flight': $data.selected }">
                                <div class="flight-image">
                                    <!-- ko if: $data.image -->
                                        <img data-bind="attr: { src: image }" />
                                    <!-- /ko -->
                                </div>
                                <h3>
                                    <!-- ko if: $data.from -->
                                    From <span data-bind="text: from.name"></span>
                                    <!-- /ko -->
                                    <!-- ko if: $data.to -->
                                    To <span data-bind="text: to.name"></span>
                                    <!-- /ko -->
                                </h3>
                                <!-- ko if: $data.price -->
                                <p data-bind="text: price"></p>
                                <!-- /ko -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hot-deals-right">
                    <div data-bind="dxScrollView: {}" class="view-flight">
                        <!-- ko with: selectedFlight -->
                            <div class="view-flight-image">
                                <!-- ko if: $data.image -->
                                    <img data-bind="attr: { src: image }" />
                                <!-- /ko -->
                            </div>
                            <h2>
                                <!-- ko if: $data.from -->
                                    From: <strong><span data-bind="text: from.name"></span></strong><br />
                                <!-- /ko -->
                                <!-- ko if: $data.to -->
                                    To: <strong><span data-bind="text: to.name"></span></strong>
                                <!-- /ko -->
                            </h2>
                            <!-- ko if: $data.price -->
                                <p data-bind="text: price" style="font-weight:bold"></p>
                            <!-- /ko -->

                            <div class="purchase-button" data-bind="dxButton: { text: 'Purchase Trip', clickAction: $parent.handlePurchaseClick }" style="margin:4px 0;"></div>  
                            
                            <div style="clear: both; margin-top: 30px">
                                
                                <div style="float: left; width: 300px;">
                                    <h2>Point of Arrival</h2>
                                    <div class="map" data-bind="dxMap: {
                                        provider: 'googleStatic',
                                        autoScale: true,
                                        markers: [
                                            $data.to.name
                                        ],
                                        width: 300,
                                        height: 200
                                    }">
                                    </div>
                                </div>

                                <div style="float: left; margin-left: 30px;">
                                    <h2>Flight Info</h2>
                                    <p>Class Of Seat: <strong>Economy</strong></p>
                                    <p>Total Travel Time: <strong data-bind="text: duration + ' hours'"></strong></p>
                                    <p>In the Air: <strong data-bind="text: timeInAir + ' hours'"></strong></p>
                                    <p>Layovers: <strong data-bind="text: layover + ' hours'"></strong></p>
                                    <p>Longest Time Between Flights: <strong>45 minutes</strong></p>
                                    <p>Shortest Time Between Flights: <strong>15 minutes</strong></p>
                                </div>

                            </div>              
                        <!-- /ko -->
                    </div>
                </div>

                <div class="find-flight-loading" data-bind="visible: loading"></div>
            </div>
        </div>
    </div>
</div>