extends layout_side

block content
   

    link(href='/bower_components/air-datepicker/dist/css/datepicker.min.css', rel='stylesheet', type='text/css')
    link(href='https://use.fontawesome.com/releases/v5.0.6/css/all.css', rel='stylesheet')
  

    h2.contHeader(id='title') #{title}
    h3.contHeader2(id='employeeName') #{employee.name}

    br
    .row
        .col-sm-5
            #form-group(style='margin-left:80px;height: 300px; background-color:#1F2739;')
                br
                .row
                    .col-sm-6
                        input.datepicker-here(id='datepicker-here',type='text',style='display:none', data-position='right top',data-language='hu',data-multiple-dates='true',data-multiple-dates-separator=',')
        .col-sm-4
            #darktable.container
                table#holidaysTable.container(style='width:90%;')
                    col(width='5%')
                    col(width='17%')
                    col(width='auto')

                    thead
                        tr
                        th
                            h1(style='text-align:center') #
                        th
                            h1(style='text-align:center') Dátum
                        th
                            h1(style='text-align:center') Megjegyzés                 

                    tbody

    
    script(src='/bower_components/air-datepicker/dist/js/datepicker.min.js')
    script(src='/bower_components/air-datepicker/dist/js/i18n/datepicker.hu.js')

  
    script.

        var dates=[];

        function dt(){
            var range=[];
            range.push (new Date('2019-11-16'));
            range.push (new Date('2019-11-19'));
            return range;
        }

        $('#datepicker-here').datepicker({
            
            language: 'hu',
            inline: 'true',
            minDate: new Date(), // Now can select only dates, which goes after today
            dateFormat: 'yyyy-mm-dd',
             //selectDate: dt(),
            date: new Date(),
            onSelect : function(fd,date){
            console.log(fd);
            }
        }).data('datepicker').selectDate(dt());
        // Táblázat sorainak generálása
        function renderWorkingTimesTable(wtList)
        {
            $('#holidaysTable > tbody').empty();
            var weekendCol;
            var color='#64b4da';

            $.each(wtList,function(i,wt){
                var newRow = $('<tr class="clickable-row" id='+wt.employeeId+' data-href=/employee/detailstemp/'+wt.employeeId+'>"');

                newRow.append('<td style="text-align:right">'+(i+1)+
                '</td><td class="td">'+wt.name+
                '</td><td style="text-align:center">'+wt.vacationYear+' / '+wt.vacationUsed+
                weekendCol+
                '</td><td style="text-align:center">'+wt.redLetterDays+
                '</td><td style="text-align:center">'+wt.state+
                '</td><td style="text-align:center">'+wt.location+
                '</td><td style="text-align:right">'+convertMinsToHrsMins(wt.workHours)+
                '</td>');
                $('#monthHoursTable > tbody:last-child').append (newRow);
            })
        }

    //script(src='/js/employee_holiday_add.js')