Mini Kabibi Habibi

<div data-options="dxView : { name: 'Trip_Travelers', 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' } " >
        <h1>Travelers</h1>

        <ul class="generic-list">
            <!-- ko foreach: trip().tripTravelers -->
            <li>
                <div class="spot">
                    <img data-bind="attr: { src: user.imageUrl }" class="icon-subst" />
                    <h2>
                        <span data-bind="text: user.name"></span>
                    </h2>
                    <div data-bind="text: user.email"></div>                
                    <div data-bind="if: $data.pending" class="lighter">
                        Invite pending
                    </div>
                </div>
            </li>
            <!-- /ko -->

            <li class="add-traveler-icon">
                <div class="clickable spot" data-bind="dxAction: trip().addTravelersAction">
                    Add a new traveler
                </div>
            </li>
        </ul>
    </div>

</div>