Mini Kabibi Habibi

<div data-options="dxView : { name: 'EditWorkout', title: 'Workout' } " >
    <div data-bind="dxCommand: { title: backButtonTitle, location: 'cancel', icon: 'clock', behavior: 'back', action: workout.handlePostpone, showIcon: DXWorkout.isWinPhone }"></div>
    <div data-bind="dxCommand: { title: saveButtonTitle, location: 'save', icon: 'save', action: workout.handleDone, showIcon: DXWorkout.isWinPhone }"></div>


    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div data-bind="dxScrollView: {}" class="wo-scroll-view">
            <!-- ko if: goal() -->
            <div class="workout-goal">
               <h1 data-bind="text: goal"></h1>
            </div>
            <!-- /ko -->

            <div data-bind="foreach: { data: workout.exerciseGroups, afterAdd: fadeIn }">
                <div class="dx-fieldset exercise-group-item" data-bind="css: { 'fade-in-init': $data.adding }">
                    <div class="dx-field dx-field-select pattern">
                        <div class="dx-field-label"><h2>Pattern</h2></div>
                        <div class="dx-field-value">
                            <select data-bind="options: PATTERNS,
                                optionsText: 'name',
                                optionsValue: 'count',
                                value: pattern"></select>
                        </div>
                    </div>

                    <!-- ko foreach: exercises -->
                    <div class="dx-fieldset">

                        <div class="dx-field">
                            <div class="dx-field-label">Exercise <span data-bind="text: ($index() + 1)"></span></div>
                            <div class="dx-field-value wo-exercise" data-bind="dxLookup: { title: 'Select exercise', dataSource: exercisesTypes, placeholder: name() || 'select...', value: name, activeStateEnabled: false }"></div>
                        </div>
                            
                        
                        <div class="dx-field">
                            <div class="dx-field-label">Equipment</div>
                            <div class="dx-field-value wo-equipment" data-bind="dxLookup: { title: 'Select equipment', dataSource: equipmentTypes, placeholder: equipment() || 'select...', value: equipment, activeStateEnabled: false }"></div>
                        </div>
                        
                        <div class="dx-field">
                            <!-- ko foreach: sets -->
                            <div>
                                <div class="set-item">
                                    <div data-bind="dxNumberBox: { value: reps, min: 1, placeholder: 'Reps' } "></div>
                                    <span>&times;</span>
                                    <div data-bind="dxNumberBox: { value: weight, min: 1, placeholder: 'Weight' } "></div>
                                    <span data-bind="text: weightUnit"></span>
                                </div>

                                <!-- ko if: canDelete() -->
                                <div class="minus" data-bind="click: handleDelete" />
                                <!-- /ko -->

                                <!-- ko if: canCopy() -->
                                <div class="plus" data-bind="click: handleCopy" />
                                <!-- /ko -->
                            </div>
                            <!-- /ko -->
                         </div>
                        
                        
                    </div>
                    <!-- /ko -->

                    <div class="dx-fieldset">
                      <div class="dx-field">
                        <div class="dx-field-label">Rest Interval</div>
                        <div class="dx-field-value rest-value">
                            <div data-bind="dxNumberBox: { value: restInterval, min: 0 }"></div>
                            sec
                        </div>
                      </div>
                    </div>

                    <div class="exercise-group-buttons">
                        <div data-bind="dxButton: { text: 'Add Exercise', clickAction: handleAddExerciseGroup }"></div>
                        <!-- ko if: canDelete() -->
                        <div data-bind="dxButton: { text: 'Delete Exercise', clickAction: function() { handleDeleteExerciseGroup(); $root.fixScrollView(); } }"></div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>

            <div class="workout-notes" data-bind="dxTextArea: { value: workout.notes, rows: 3, placeholder: 'Notes' }"></div>
        </div>
    </div>
</div>