<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>

    <div style="position: absolute; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0;"></div>

    <section class="options-layout-box-scheduler">

        <div data-bind="dxScrollView: { }" style="position: absolute; top: 0px; bottom: 0;">
            <div style="padding: 10px 20px 20px 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, onValueChanged: settingsSaveClick }"></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,
                                                        onValueChanged: settingsSaveClick
                                                         }"></div>
                <!--<div style="float: right;" data-bind="dxButton: { text: 'Update', onClick: settingsSaveClick }"></div>-->

                <div id="filterPaneCalendar" data-bind="dxCalendar: {
                    firstDayOfWeek: 0,
                    onValueChanged: dropdownCalendarValueChange,
                    value: schedulerDateValue
                    }">
                </div>

                <h3 class="baseColourLight" style="margin-top: 30px; margin-bottom: 10px;">Today's Patients</h3>
                <div data-bind="dxList: { items: todayListData, noDataText: 'No bookings today', onItemClick: todayListItemClick }" style="">
                    <div data-options="dxTemplate : { name: 'item' } ">
                        <div data-bind="style: { backgroundColor: borderColor }" style="height: 100%; display: inline-block; 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: 190px; "></div>
                        <div style="float: right; display: inline-block;" data-bind="text: moment(start).format('HH:mm')"></div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <section class="scheduler-layout-box-scheduler">

        <div class="sh-toolbar-transparent calendar-toolbar" data-bind="dxToolbar: { dataSource: [
                            { location: 'before', widget: 'dxButton', options: { icon: 'fal fa-calendar', onClick: todayButtonClick, text: 'Today', elementAttr: {'id': 'btnToday'}, }},
                            { location: 'before', widget: 'dxButton', options: { icon: 'chevronleft', onClick: nextButtonClick }},
                            { location: 'before', widget: 'dxButton', options: { icon: 'chevronright', onClick: previousButtonClick }},
                            { location: 'before', widget: 'dxButton', options: { onClick: dropdownCalendarClick, text: calendarCurrentDate, elementAttr: {'id': 'btnDropDownCalendar'}, }},
                            { location: 'after',  widget: 'dxSelectBox', locateInMenu: 'auto', options: {
                    width: 100,
                    items: calendarViewDropdown.calendarViews,
                    value: calendarViewDropdown.calenderViewButtonValue,
                    onValueChanged: calendarViewDropdown.onValueChanged
                }
            },
          ]} ">
        </div>      

        <div id="calendarScroll" data-bind="dxScrollView: { }" style="position: absolute; height: auto; top: 60px; bottom: 0; right: 10px; left: 10px;">
            <div id='calendar'></div>
        </div>
    </section>

    <div data-bind="dxPopover: { visible: calendarDropdownVisible, target: calendarDropdownTarget}">
        <div data-options="dxTemplate : { name: 'content' } ">
            <div id="schedulerPopoverCalendar" data-bind="dxCalendar: { value: schedulerDateValue, onValueChanged: dropdownCalendarValueChange, 
                showTodayButton: true }"></div>
        </div>
    </div>

    <div class="popout" data-bind="dxPopover: { visible: clinicsPopoverVisible,
                                target: clinicsPopover,
                                width: 350,
                                height: 600,
                                shading: true,
                                shadingColor: 'transparent' }">
        <div data-options="dxTemplate : { name: 'content' } ">
            <h3 class="baseColourLight" data-bind="text: 'My Clinicians'"></h3>
            <div data-bind="dxList: { items: clinics, onItemClick: clinicListClick }" style="position: absolute; top: 65px; bottom: 5px; 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 data-options="dxViewPlaceholder: { viewName: 'groupBookings' }" data-bind="with: groupBookingsVM"></div>
</div>