{{##def.renderWeekTotal:dayRange:
    {{
        var sum = {
            availabilityTime: 0,
            drivingTime: 0,
            restTime: 0,workingTime: 0
        };
    }}
    {{ for(var i = dayRange[0];i < dayRange[1];i++) { }}
        {{ var currentItem = list[i]; }}
        {{ sum.availabilityTime += currentItem.availabilityTime; }}
        {{ sum.drivingTime += currentItem.drivingTime; }}
        {{ sum.restTime += currentItem.restTime; }}
        {{ sum.workingTime += currentItem.workingTime; }}
    {{ } }}
    <ul>
        <li>
            <span class="other-work-ico"></span>
            {{=helper.formatMillisecondsToHM(sum.workingTime)}}
        </li>
        <li>
            <span class="driving-ico"></span>
            {{=helper.formatMillisecondsToHM(sum.drivingTime)}}
        </li>
        <li>
            <span class="break-and-daily-rest-ico"></span>
            {{=helper.formatMillisecondsToHM(sum.restTime)}}
        </li>
        <li>
            <span class="periods-of-availability-ico"></span>
            {{=helper.formatMillisecondsToHM(sum.availabilityTime)}}
        </li>
    </ul>
#}}
{{
    function fixMonthYearDisplay(){
        var date = new Date();
        var firstMonthCounter = 0;
        var lastMonthCounter = 0;
        var differentMonthCount = _.uniq(list,function(item){
            date.setTime(item.date);
            return date.getMonth();
        });
        if(differentMonthCount.length > 1){
            _.each(list,function(element, index, list){
                var currentMonth;
                var firstMonth;
                var lastMonth;
                date.setTime(element.date);
                currentMonth = date.getMonth();
                date.setTime(differentMonthCount[0].date);
                firstMonth = date.getMonth();
                date.setTime(differentMonthCount[1].date);
                lastMonth = date.getMonth();
                if(currentMonth == firstMonth){
                    firstMonthCounter++;
                }else if(currentMonth == lastMonth){
                    lastMonthCounter++;
                }
            });
            if(firstMonthCounter > lastMonthCounter){
                return date.setTime(differentMonthCount[0].date);
            }else if(lastMonthCounter > firstMonthCounter){
                return date.setTime(differentMonthCount[1].date);
            }
        }
        return json.currentDate;
    }
}}
{{ function formatWeekNumber(weekNumber){
        return weekNumber < 10 ? "0" + weekNumber : weekNumber;
   }
}}

<div class="tachograph-calendar">
    {{ var list = json.driverWorkingHoursList; }}
    {{ var date = new Date(); }}
    {{ date.setDate(date.getDate() - ((date.getDay() || 7) - 1) + 6); }}
    {{ date.setHours(23,59,59,999); }}
    {{ var maxNextDate = date.valueOf(); }}
    {{ date.setTime(json.currentDate); }}
    {{ var nextMonthDate = date.setMonth(date.getMonth() + 1); }}
    {{ var lastYear = list[0]; }}
    {{ date.setTime(json.currentDate); }}
    {{ var nextYearDate = date.setFullYear(date.getFullYear() + 1); }}
    {{ date.setTime(json.currentDate); }}
    {{ var lastYearDate = date.setFullYear(date.getFullYear() - 1); }}
    {{ date.setTime(json.currentDate); }}
    {{ var lastMonthDate = date.setMonth(date.getMonth() - 1); }}
    {{ date.setTime(json.currentDate); }}
    {{ var nextWeekDate = date.setDate(date.getDate() + 7); }}
    {{ var disabledNextYearClass = nextYearDate > maxNextDate ? "disabled":""; }}
    {{ var disabledNextMonthClass = nextMonthDate > maxNextDate ? "disabled":""; }}
    {{ var disabledNextWeekClass = nextWeekDate > maxNextDate ? "disabled":""; }}

    <div class="tachograph-calendar-header">
        {{ fixMonthYearDisplay(); }}
        {{=$.datepicker.formatDate("M yy" , new Date(fixMonthYearDisplay()))}}
        <div class="left-arrow-holder">
            <span class="double-left-arrow-ico" data-button="lastYear"></span>
            <span class="left-arrow-ico" data-button="lastMonth"></span>
        </div>
        <div class="right-arrow-holder">
            <span class="right-arrow-ico {{=disabledNextMonthClass}}" data-button="nextMonth"></span>
            <span class="double-right-arrow-ico {{=disabledNextYearClass}}" data-button="nextYear"></span>
        </div>
    </div>
    <div class="info-holder">
        <table class="info">
            <thead>
                <tr>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                    <th>Sun</th>
                    <th>Week Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    {{ for(var i=0;i < 7;i++) { }}
                        {{var currentItem = list[i];}}
                        <td data-date="{{=currentItem.date}}">
                            <div class="day-number">{{=$.datepicker.formatDate("dd" , new Date(currentItem.date))}}</div>
                            <div class="tachograph-data">
                                <ul>
                                    <li>
                                        <span class="other-work-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.workingTime)}}
                                    </li>
                                    <li>
                                        <span class="driving-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.drivingTime)}}
                                    </li>
                                    <li>
                                        <span class="break-and-daily-rest-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.restTime)}}
                                    </li>
                                    <li>
                                        <span class="periods-of-availability-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.availabilityTime)}}
                                    </li>
                                </ul>
                            </div>
                        </td>
                    {{ } }}
                    <td class="stripe">
                        <div class="tachograph-data">
                            {{#def.renderWeekTotal:{0:0,1:7} }}
                        </div>
                    </td>
                </tr>
                <tr>
                    {{ for(var i=7;i < 14;i++) { }}
                        {{var currentItem = list[i];}}
                        <td data-date="{{=currentItem.date}}">
                            <div class="day-number">{{=$.datepicker.formatDate("dd" , new Date(list[i].date))}}</div>
                            <div class="tachograph-data">
                                <ul>
                                    <li>
                                        <span class="other-work-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.workingTime)}}
                                    </li>
                                    <li>
                                        <span class="driving-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.drivingTime)}}
                                    </li>
                                    <li>
                                        <span class="break-and-daily-rest-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.restTime)}}
                                    </li>
                                    <li>
                                        <span class="periods-of-availability-ico"></span>
                                        {{=helper.formatMillisecondsToHM(currentItem.availabilityTime)}}
                                    </li>
                                </ul>
                            </div>
                        </td>
                    {{ } }}
                    <td class="stripe">
                        <div class="tachograph-data">
                            <ul>
                                {{#def.renderWeekTotal:{0:7,1:14} }}
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="tachograph-calendar-footer">
        {{ var currentWeekNumber = helper.getWeekNumber(new Date(list[0].date)); }}
        {{ date.setDate(1); }}
        {{ date.setMonth(11); }}
        {{ date.setDate(31); }}
        {{ var MaxWeekNumberInThisYear = helper.getWeekNumber(date); }}
        {{ var currentWeek = currentWeekNumber % MaxWeekNumberInThisYear || MaxWeekNumberInThisYear; }}
        {{ var nextWeek = (currentWeekNumber + 1) % MaxWeekNumberInThisYear || MaxWeekNumberInThisYear; }}
        {{ var nextWeekAfterNextWeek = (currentWeekNumber + 2) % MaxWeekNumberInThisYear || MaxWeekNumberInThisYear; }}
        {{ var lastWeek = (currentWeekNumber - 1) % MaxWeekNumberInThisYear || MaxWeekNumberInThisYear; }}
        {{ currentWeek = formatWeekNumber(currentWeek); }}
        {{ nextWeek = formatWeekNumber(nextWeek); }}
        {{ nextWeekAfterNextWeek = formatWeekNumber(nextWeekAfterNextWeek); }}
        {{ lastWeek = formatWeekNumber(lastWeek); }}
        <b>week {{=currentWeek}}-{{=nextWeek}}</b>
        <div class="left-arrow-holder">
            <span class="left-arrow-ico" data-button="lastWeek"></span>
            <span>week {{=lastWeek}}-{{=currentWeek}}</span>
        </div>
        <div class="right-arrow-holder">
            <span>week {{=nextWeek}}-{{=nextWeekAfterNextWeek}}</span>
            <span class="right-arrow-ico {{=disabledNextWeekClass}}" data-button="nextWeek"></span>
        </div>
    </div>
</div>