<div data-options="dxView : { name: 'schedulerShared', title: 'schedulerShared' } ">

    <div data-bind="dxPopover: { width: 'auto', height: 'auto', visible: calendarViewDropdown.visible, target: calendarViewDropdown.calViewPopover}">
        <div data-bind="dxList: { dataSource: calendarViewDropdown.calendarViews, onItemClick: calendarViewDropdown.selectCalendarView }"></div>
    </div>

    <section class="options-layout-box-scheduler">
        <div style="padding: 20px;">

            <div id="bookingAdd" data-bind="dxclick: bookingAddClick" style="cursor: pointer;">
                <h4 class="baseColourLight dx-icon-plus" style="display: inline-block; margin-right: 5px;"></h4>
                <h4 class="baseColourLight" style="display: inline-block;">Add Booking</h4>
            </div>

            <div style="margin-top: 20px;" data-bind="dxCalendar: {
                    firstDayOfWeek: 0,
                     onValueChanged: drowdownCalendarValueChange }">
            </div>

            <h3 class="baseColourLight" style="margin-top: 30px; margin-bottom: 10px;">Today</h3>
            <div data-bind="dxList: { items: todayListData, noDataText: 'No bookings today', onItemClick: todayListItemClick }" style="position: absolute; top: 420px; bottom: 0px; height: auto!important; left: 10px; right: 10px;">
                <div data-options="dxTemplate : { name: 'item' } ">
                    <div data-bind="style: { backgroundColor: borderColor }" style="height: 100%; width: 5px; display: inline-block; margin-right: 2px; vertical-align: middle;"></div>
                    <div data-bind="style: { backgroundColor: statusColor }" style="border-radius: 50%; height: 14px; width: 14px; display: inline-block; margin-right: 5px; vertical-align: middle;"></div>
                    <div class="ellipsis" data-bind="text: title" style="display: inline-block; vertical-align: middle; width: 193px; "></div>
                    <div style="float: right; display: inline-block;" data-bind="text: moment(start).format('HH:mm')"></div>
                </div>
            </div>

        </div>
    </section>

    <section class="scheduler-layout-box-scheduler">

        <section style="position: absolute; top: 10px; left: 20px;">
            <!--<div style="background-color: tomato!important; line-height: 28px; text-align: center" class="calendar-view-button" data-bind="{ dxclick: dropdownCalendarClick }">
                <h5 class="dx-icon-event" style="padding-top: 11px;"></h5>
            </div>-->
            <div id="calendarDateTitle" class="baseColourLight calendar-view-date" data-bind="text: calendarCurrentDate, dxclick: dropdownCalendarClick" style="cursor: pointer;"></div>
        </section>
        <section style="padding: 5px; line-height: 28px; position: absolute; top: 10px; right: 10px;">

            <div style="background-color: tomato!important;" class="calendar-view-button" data-bind="dxclick: function(){ switchCalendarView(4) }">
                <h5 style="padding-top: 4px;">To</h5>
            </div>
            <div style="" class="calendar-view-button" data-bind="dxclick: function(){ switchCalendarView(1) }">
                <h5 style="padding-top: 4px;">Da</h5>
            </div>
            <div style="" class="calendar-view-button" data-bind="dxclick: function(){ switchCalendarView(2) }">
                <h5 style="padding-top: 4px;">We</h5>
            </div>
            <div style="" class="calendar-view-button" data-bind="dxclick: function(){ switchCalendarView(3) }">
                <h5 style="padding-top: 4px;">Mo</h5>
            </div>

            <h2 class="dx-icon-chevronleft" style="display: inline-block; color: darkgrey; margin-right: 20px; cursor: pointer; vertical-align: middle;" data-bind="dxclick: nextButtonClick"></h2>
            <h2 class="dx-icon-chevronright" style="display: inline-block; color: darkgrey; cursor: pointer; vertical-align: middle;" data-bind="dxclick: previousButtonClick"></h2>

        </section>

        <div id="calendarScroll" data-bind="dxScrollView: { onPullDown: schedulerPullDownAction,  showScrollbar: 'always' }" 
             style="position: absolute; height: auto; top: 70px; bottom: 0; right: 10px; left: 10px;">
            <div id='calendar'></div>
        </div>
    </section>


    <section class="settings-layout-box-scheduler">
        <div style="padding: 20px;">

            <h3 class="baseColourLight" style="margin-bottom: 10px;">Settings</h3>
            <div class="sh-field-label">
                <div style="display:inline-block">Timescale:</div>
                <div style="display: inline-block" data-bind="text: slotMinutes()"></div>
                <div style="display:inline-block"> mins</div>
            </div>
            <div class="sh-field-value" data-bind="dxSlider: { min: 5, max: 60, step: 5, value: slotMinutes }"></div>
            <div class="sh-field-label">Time your diary starts</div>
            <div class="sh-field-value" data-bind="dxSelectBox: { dataSource: times,
                                                        displayExpr: 'desc',
                                                        valueExpr: 'time',
                                                        value: businessTimeStart,
                                                         }"></div>
            <div style="float: right;" data-bind="dxButton: { text: 'Update', onClick: settingsSaveClick }"></div>
            <h3 class="baseColourLight" style="margin-top: 60px;" data-bind="text: AppInfo.apiVersion() < 8? 'My Clinics' : 'My Sites'"></h3>
            <div data-bind="dxList: { items: clinics, onItemClick: clinicListClick }" style="position: absolute; top: 290px; bottom: 0px; height: auto!important; left: 10px; right: 10px;">
                <div data-options="dxTemplate : { name: 'item' } ">
                    <div data-bind="text: name"></div>
                </div>
            </div>            

        </div>
    </section>


    <div data-bind="dxPopover: { visible: calendarDropdownVisible, target: '#calendarDateTitle' }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div data-bind="dxCalendar: { onValueChanged: drowdownCalendarValueChange, showTodayButton: true }"></div>
            <!--<div data-bind="dxButton: { text: 'Today', onClick: dropdownCalendarTodayClick } " style="position: absolute; top: 280px; left: 0; right: 0; bottom: 0;"></div>-->
        </div>
    </div>

    <div class="popout" data-bind="dxPopover: { visible: settingsPopupVisible,
                                target: settingsPopover,
                                width: 350,
                                height: 600,
                                shading: true,
                                shadingColor: 'transparent' }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <h3 class="baseColourLight" style="margin-bottom: 10px;">Settings</h3>
            <div class="sh-field-label">
                <div style="display:inline-block">Timescale:</div>
                <div style="display: inline-block" data-bind="text: slotMinutes()"></div>
                <div style="display:inline-block"> mins</div>
            </div>
            <div class="sh-field-value" data-bind="dxSlider: { min: 5, max: 60, step: 5, value: slotMinutes }"></div>
            <div class="sh-field-label">Time your diary starts</div>
            <div class="sh-field-value" data-bind="dxSelectBox: { dataSource: times,
                                                        displayExpr: 'desc',
                                                        valueExpr: 'time',
                                                        value: businessTimeStart,
                                                         }"></div>
            <span data-bind="dxButton: { text: 'Update', onClick: settingsSaveClick }"></span>
            <p style="border-bottom: 1px solid white; margin-top: 20px;"></p>
            <h3 class="baseColourLight" data-bind="text: AppInfo.apiVersion() < 8? 'My Clinics' : 'My Sites' "></h3>
            <div data-bind="dxList: { items: clinics, onItemClick: clinicListClick }" style="position: absolute; top: 290px; bottom: 0px; height: auto!important; left: 20px; right: 20px;">
                <div data-options="dxTemplate : { name: 'item' } ">
                    <div data-bind="text: name"></div>
                </div>
            </div>

        </div>
    </div>

    <div data-options="dxViewPlaceholder: { viewName: 'outpatientBookingAddEdit' }" data-bind="with: outpatientBookingAddEditVM"></div>

</div>