Mini Kabibi Habibi

<div data-options="dxView : { name: 'Trip_Summary', layout: 'default', 'current-navigation-item-id': 'trips' } " >
    
    <div data-options="dxContent : { targetPlaceholder: 'sidebar-content' } " >
        <div data-options="dxViewPlaceholder : { viewName: 'Trip_SideBar' } " ></div>
    </div>
    
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        <ul class="trip-summary-tools">
            <li class="gray-plus-icon"></li>
            <li class="sharing-icon"></li>
            <li class="settings-icon"></li>
            <li class="delete-icon"></li>
        </ul>

        <h1>Trip Summary</h1>

        <!-- ko with: trip -->

            <ul class="generic-list">

                <li class="traveler-icon">
                    <div class="clickable spot" data-bind="dxAction: travelersAction">
                        <h2>
                            Travelers
                            <span class="softer">
                                (<span data-bind="text: tripTravelers().length"></span>)
                            </span>
                        </h2>
                        <ul>
                            <!-- ko foreach: getConfirmedTravelers() -->
                            <li>
                                <span data-bind="text: user.name"></span>
                                <span data-bind="if: $index() === 0" class="softer">(you)</span>
                            </li>
                            <!-- /ko -->
                            <!-- ko if: getPendingTravelers().length -->
                            <li class="lighter">
                                Invites pending: <span data-bind="text: getPendingTravelers().length"></span>
                            </li>
                            <!-- /ko -->                        
                        </ul>
                    </div>
                </li>

                <li class="flight-icon">
                    <div class="clickable spot" data-bind="dxAction: flightsAction">
                        <h2>
                            Flights
                            <span class="softer">
                                (<span data-bind="text: flights.length"></span>)
                            </span>
                        </h2>
                        <ul data-bind="foreach: flights">
                            <li>
                                <strong data-bind="text: from"></strong> 
                                to
                                <strong data-bind="text: to"></strong>
                                on 
                                <strong data-bind="text: fullDateString"></strong>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="schedule-icon">
                    <div class="spot clickable" data-bind="dxAction: scheduleAction">
                        <h2>Schedule
                            <span data-bind="attr: { class: hasPendingAppointments ? 'lighter': 'softer' }">
                                (<span data-bind="text: tripAppointments().length"></span>)
                            </span>
                        </h2>
                        <ul data-bind="foreach: tripAppointments">
                            <li data-bind="text: name, css: { lighter: pending }">
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="map-icon">
                    <div class="spot">
                        <h2>
                            Maps of <span data-bind="text: location"></span>
                        </h2>   
                    </div>
                </li>

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

</div>