Mini Kabibi Habibi

<div data-options="dxView : { name: 'Attraction', layout: 'default', 'current-navigation-item-id': 'home' } " >
    
    <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="orange-plus-icon"></li>
            <li class="sharing-icon"></li>
            <li class="settings-icon"></li>
            <li class="delete-icon"></li>
        </ul>
        <h1>Attraction</h1>
        <!-- ko with: attraction -->
        <div class="attraction-row attraction-row-step">
            <div class="attraction-grid-left">
                <img data-bind="attr: { src: imageUrl }"/>
            </div>
            <div class="attraction-grid-right">
                <h2 data-bind="text: name" style="font-size: 1.5em"></h2>
                <div class="attraction-item-step">
                    <strong class="lighter">#<span data-bind="text: id"></span> of 719</strong> attractions of New York
                </div>
                
                <div class="small">Address</div>
                <div class="lighter attraction-item-step">
                    <strong data-bind="text: address"></strong>
                </div>
                
                <div class="small">
                    Yelp review
                </div>
                <div class="lighter attraction-item-step">
                    <strong data-bind="text: reviewCount"></strong> reviews
                </div>

                <div class="small">Attraction type</div>
                <div class="attraction-item-step">
                    <strong data-bind="text: type" class="lighter"></strong>
                </div>

                <div class="small">Information</div>
                <div>
                    <strong class="softer">
                        <a class="lighter" data-bind="attr: { href: infoUrl }" target="_blank">Maps</a> |
                        <a class="lighter" data-bind="attr: { href: infoUrl }" target="_blank">Photos</a> |
                        <a class="lighter" data-bind="attr: { href: infoUrl }" target="_blank">Web</a>
                    </strong>
                </div>

                <div class="send-to-group-form">
                    <div class="attraction-row attraction-cell-step">
                        <div class="attraction-grid-cell cell-title">
                            <strong>
                                When:
                            </strong>
                        </div>
                        <div class="attraction-grid-cell cell-input">
                            <input type="date" class="attraction-when-input input-border" data-bind="value: $parent.dateWhen, valueUpdate: 'blur', css: { 'input-not-fill': !$parent.hasDateWhen() }"/>
                        </div>
                        <div class="attraction-grid-cell cell-image">
                            <img src="images/plans.png" width="34" style="vertical-align: middle"/>
                        </div>
                    </div>

                    <div class="attraction-row attraction-cell-step">
                        <div class="attraction-grid-cell cell-title">
                            <strong>
                                Times:
                            </strong>
                        </div>
                        <div class="attraction-grid-cell cell-input attraction-time">
                            <input type="time" class="small-date-input input-border" data-bind="value: $parent.dateTime, valueUpdate: 'blur', css: { 'input-not-fill': !$parent.hasDateTime() }"/>
                            <span>to</span> 
                            <input type="time" class="small-date-input input-border"/>
                        </div>
                        <div class="attraction-grid-cell cell-image">
                            <img src="images/time-traveled.png" width="34" style="vertical-align: middle"/>
                        </div>
                    </div>

                    <div class="attraction-send-to-group" data-bind="click: $parent.sendToGroup"></div>
                </div>
            </div>
        </div>
        <!-- /ko -->

    </div>

</div>