<commit_before><h1>Place Your Bookings</h1>
<section class="stageContainer flowAcross">
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.selectDate}" ng-click="vm.toggleView('selectDate')">1. Select Your Date</div>
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.selectTime}" ng-click="vm.toggleView('selectTime')">2. Select Your Time Slot</div>
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.payment}" ng-click="vm.toggleView('payment')">3. Payment / Confirmation</div>
</section>
<section ng-show="vm.misc.stage.selectDate">
    <div class="flowAcross">
        <h3 class="flexExpand">1. Select Your Booking Date</h3>
        <button ng-click="vm.toggleView('selectTime')">> Select Your Time Slot</button>
    </div>
    <div class="calendarViewContainer flexDown">
        <div class="monthContainer flexAcross">
            <div class="clickable monthArrow" ng-click="vm.changeMonth('prev')"><</div>
            <div class="monthLbl">{{vm.calendar.currentMonthYear | date: 'MMMM, yyyy'}}</div>
            <div class="clickable monthArrow" ng-click="vm.changeMonth('next')">></div>
        </div>
        <div class="rowContainer flexAcross calendarHeader">
            <div class="columnContainer" ng-repeat="day in vm.calendar.header">
                {{day}}
            </div>
        </div>
        <div class="rowContainer flexAcross" ng-repeat="dateObj in vm.calendar.dateList">
            <div class="columnContainer clickable flexDown" ng-repeat="day in dateObj" ng-class="{'isSelected': day.isSelected, 'isFull': day.isFull, 'disabledDay':day.val == '-', 'disabledDay': !day.canBook}" ng-click="vm.selectThisDate($index,$parent.$index)">
                <span class="dateVal">{{day.val}}</span>
                <div class="availSlotContainer" ng-if="day.val != '-'">
                    <span class="availSlotLbl">Available Slot:</span>
                    <span class="availSlot">{{day.totalSlotAvail - day.slotBooked}}/13</span>
                </div>
            </div>
        </div>
    </div>
</section>
<section ng-show="vm.misc.stage.selectTime">
    <div class="flowAcross">
        <button ng-click="vm.toggleView('selectDate')">< Select Your Booking Date</button>
        <h3 class="flexExpand alignCenter">2. Select Your Time Slot</h3>
        <button ng-click="vm.toggleView('payment')">> Confirm Your Booking</button>
    </div>
    <div ng-show="vm.misc.userData.myBookings === undefined || vm.misc.userData.myBookings === null || vm.misc.userData.myBookings.length === 0">
        <h3 class="specialMsg">Please Select A Booking Date First</h3>
    </div>
    <div ng-show="vm.misc.userData.myBookings.length > 0">
        <div class="flexDown dayTimeSlotContainer" ng-repeat="booking in vm.misc.userData.myBookings" ng-init="sectionIndex = $index">
            <strong>{{$index + 1}}. {{booking.dayTimeInEpoch | date: 'fullDate'}}</strong>
            <div class="flowAcross">
                <div class="timeSlotContainer clickable" ng-repeat="timeAvail in booking.availableTimeSlotByHour" ng-if="timeAvail.isAvailForBooking" ng-click="vm.selectTimeSlot($index,sectionIndex)" ng-class="{'isSelected':timeAvail.isSelected}">{{timeAvail.timeInEpoch | date:'shortTime'}}</div>
            </div>
        </div>
    </div>
</section>
<section ng-show="vm.misc.stage.payment">
    <div class="flowAcross">
        <button ng-click="vm.toggleView('selectTime')">< Select Your Time Slot</button>
        <h3 class="flexExpand alignCenter">3. Confirm Your Booking</h3><commit_msg>Order date slow by ascending order<commit_after><h1>Place Your Bookings</h1>
<section class="stageContainer flowAcross">
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.selectDate}" ng-click="vm.toggleView('selectDate')">1. Select Your Date</div>
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.selectTime}" ng-click="vm.toggleView('selectTime')">2. Select Your Time Slot</div>
    <div class="clickable disabled" ng-class="{'enabled': vm.misc.stage.payment}" ng-click="vm.toggleView('payment')">3. Payment / Confirmation</div>
</section>
<section ng-show="vm.misc.stage.selectDate">
    <div class="flowAcross">
        <h3 class="flexExpand">1. Select Your Booking Date</h3>
        <button ng-click="vm.toggleView('selectTime')">> Select Your Time Slot</button>
    </div>
    <div class="calendarViewContainer flexDown">
        <div class="monthContainer flexAcross">
            <div class="clickable monthArrow" ng-click="vm.changeMonth('prev')"><</div>
            <div class="monthLbl">{{vm.calendar.currentMonthYear | date: 'MMMM, yyyy'}}</div>
            <div class="clickable monthArrow" ng-click="vm.changeMonth('next')">></div>
        </div>
        <div class="rowContainer flexAcross calendarHeader">
            <div class="columnContainer" ng-repeat="day in vm.calendar.header">
                {{day}}
            </div>
        </div>
        <div class="rowContainer flexAcross" ng-repeat="dateObj in vm.calendar.dateList">
            <div class="columnContainer clickable flexDown" ng-repeat="day in dateObj" ng-class="{'isSelected': day.isSelected, 'isFull': day.isFull, 'disabledDay':day.val == '-', 'disabledDay': !day.canBook}" ng-click="vm.selectThisDate($index,$parent.$index)">
                <span class="dateVal">{{day.val}}</span>
                <div class="availSlotContainer" ng-if="day.val != '-'">
                    <span class="availSlotLbl">Available Slot:</span>
                    <span class="availSlot">{{day.totalSlotAvail - day.slotBooked}}/13</span>
                </div>
            </div>
        </div>
    </div>
</section>
<section ng-show="vm.misc.stage.selectTime">
    <div class="flowAcross">
        <button ng-click="vm.toggleView('selectDate')">< Select Your Booking Date</button>
        <h3 class="flexExpand alignCenter">2. Select Your Time Slot</h3>
        <button ng-click="vm.toggleView('payment')">> Confirm Your Booking</button>
    </div>
    <div ng-show="vm.misc.userData.myBookings === undefined || vm.misc.userData.myBookings === null || vm.misc.userData.myBookings.length === 0">
        <h3 class="specialMsg">Please Select A Booking Date First</h3>
    </div>
    <div ng-show="vm.misc.userData.myBookings.length > 0">
        <div class="flexDown dayTimeSlotContainer" ng-repeat="booking in vm.misc.userData.myBookings | orderBy:'dayTimeInEpoch':false" ng-init="sectionIndex = $index">
            <strong>{{$index + 1}}. {{booking.dayTimeInEpoch | date: 'fullDate'}}</strong>
            <div class="flowAcross">
                <div class="timeSlotContainer clickable" ng-repeat="timeAvail in booking.availableTimeSlotByHour" ng-if="timeAvail.isAvailForBooking" ng-click="vm.selectTimeSlot($index,sectionIndex)" ng-class="{'isSelected':timeAvail.isSelected}">{{timeAvail.timeInEpoch | date:'shortTime'}}</div>
            </div>
        </div>
    </div>
</section>
<section ng-show="vm.misc.stage.payment">
    <div class="flowAcross">
        <button ng-click="vm.toggleView('selectTime')">< Select Your Time Slot</button>
        <h3 class="flexExpand alignCenter">3. Confirm Your Booking</h3>
{'fraction_non_alphanumeric': 0.17277268942547877, 'fraction_numerical': 0.005828476269775187, 'mean_word_length': 3.5441361916771754, 'pattern_counts': {'":': 0, '<': 157, '<?xml version=': 0, '>': 159, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '105428', 'n_tokens_mistral': 2279, 'n_tokens_neox': 2215, 'n_words': 417}