Mini Kabibi Habibi

<div data-options="dxView : { name: 'DetailFlight', title: 'Detail Flight', layout: 'index' } " >
    
    <div data-options="dxContent : { targetPlaceholder: 'content' } " > 
        <div class="layout-content-margin" data-bind="with: flight">
        
            <div class="detail-flight-header">

                <div class="grid_5" data-bind="text: from.name" style="word-wrap: break-word;"></div>

                <div class="grid_10">
                    <div class="detail-flight-from-to"></div>
                </div>

                <div class="grid_4" data-bind="text: to.name"></div>

            </div>

            <div class="detail-flight-content">
                
                <div class="clearfix detail-flight-content-vertical-offset">
                    <div class="grid_1">
                        <div class="detail-flight-out"></div>
                    </div>
                    <div class="grid_2">
                        <strong>Leave</strong>
                    </div>
                    
                    <div class="grid_3">
                        <div>
                            <div data-bind="text: from.departureDateTime || '&nbsp;'"></div>
                            <!-- ko foreach: connections -->
                            <div class="connections" data-bind="text: departureDateTime || '&nbsp;'"></div>
                            <!-- /ko -->
                            <div data-bind="text: from.arrivalDateTime || '&nbsp;'"></div>
                        </div>
                    </div>

                    <div class="grid_5">
                        <div data-bind="text: from.name + ', ' + from.code"></div>
                        <!-- ko foreach: connections -->
                        <div class="connections" data-bind="text: name"></div>
                        <!-- /ko -->
                        <div data-bind="text: to.name + ', ' + to.code"></div>
                    </div>
                    
                    <div class="grid_6 suffix_2">
                        <span class="detail-flight-price" data-bind="text: price"></span>
                    </div>
                </div>

                <div class="clearfix detail-flight-content-vertical-offset">
                    <div class="grid_1">
                        <div class="detail-flight-in"></div>
                    </div>
                    <div class="grid_2">
                        <strong>Return</strong>
                    </div>
                    <div class="grid_3">
                        <div>
                            <div data-bind="text: to.departureDateTime || '&nbsp;'"></div>
                            <!-- ko foreach: connectionsReturn -->
                            <div class="connections" data-bind="text: departureDateTime || '&nbsp;'"></div>
                            <!-- /ko -->
                            <div data-bind="text: to.arrivalDateTime || '&nbsp;'"></div>
                        </div>
                    </div>
                    <div class="grid_5">
                        <div data-bind="text: to.name + ', ' + to.code"></div>
                        <!-- ko foreach: connectionsReturn -->
                        <div class="connections" data-bind="text: name"></div>
                        <!-- /ko -->
                        <div data-bind="text: from.name + ', ' + from.code"></div>
                    </div>
                    <div class="grid_6 suffix_2">
                        <a class="detail-flight-purchase" data-bind="attr: { href: parchaseLink }" target="_blank">
                            PURCHASE THIS TRIP
                        </a>
                    </div>
                </div>

                <div class="clearfix detail-flight-content-vertical-offset">
                    <div class="grid_10">
                        <div class="detail-flight-param">Total travel time: <strong data-bind="text: durationInHours + ' hours'"></strong></div>
                        <div class="detail-flight-param">In the air: <strong data-bind="text: timeInAir + ' hours'"></strong></div>
                        <div class="detail-flight-param">Layovers: <strong data-bind="text: layoverInHours + ' hours'"></strong></div>
                        <div class="detail-flight-param">Longest time between fligths: <strong>45 minutes</strong></div>
                        <div class="detail-flight-param">Shortest time between fligths: <strong>15 minutes</strong></div>
                    </div>
                    <div class="grid_6 suffix_3">
                        <div class="detail-flight-icon detail-flight-pin" data-bind="click: DXTravel.notImplemented">Pin for later</div>
                        <div class="detail-flight-icon detail-flight-dont-show" data-bind="click: DXTravel.notImplemented">Don’t show again</div>
                        <div class="detail-flight-icon detail-flight-share-email" data-bind="click: DXTravel.notImplemented">Share Via email</div>
                        <div class="detail-flight-icon detail-flight-share-twitter" data-bind="click: DXTravel.notImplemented">Share On Twitter</div>
                        <div class="detail-flight-icon detail-flight-share-facebook" data-bind="click: DXTravel.notImplemented">Share with Facebook friends</div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <div data-options="dxContent : { targetPlaceholder: 'left-side-bar-content' } " > 
        <div class="back-button" data-bind="click: back">SEARCH RESULTS</div>
    </div>
</div>