extends layout_side

block content
    link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.6.1/css/all.css', integrity='sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP', crossorigin='anonymous')
    link(rel='stylesheet' href='/css/spinner.css')
    #loader
    .container#main(style='width:100%;')
      h2.contHeader(id='month') #{title} 
      br
      #form-group(style='width:100%; background-color:#1F2739;')
        
        
        .row(style='padding-left:10px;')
          .col-sm-2
            .form-group
              label Elszámolási hónap:
              #datetimepicker4.input-group.date
                input.form-control(id='calcDate',name='dateEmission', tabindex='6',type='text',style='color: white;background-color:#2C3446;')
                span.input-group-addon
                  span.glyphicon.glyphicon-calendar
             
      br      
      
      #darktable.clickable.container(style='display:none')
        table#monthHoursTable(style='width:100%;')
          col(width='5%')
          col(width='auto')
          col(width='10%')
          col(width='5%')
          col(width='5%')
          col(width='10%')
          col(width='8%')
          col(width='30%')
          col(width='8%')
          thead
            tr
              th
                h1(style='text-align:center') #
              th
                h1 Név
              th
                h1(style='text-align:center') Szabadság / Kiadott                 
              th
                h1(style='text-align:center') Hétvége              
              th
                h1(style='text-align:center') Ünnep
              th
                h1(style='text-align:center') Státusz
              th
                h1(style='text-align:center') Jármű                
              th
                h1(style='text-align:center') Helyszín                
              th
                h1(style='text-align:center') Órák
          tbody
            -//each wt, i in wtList
            -//  tr.clickable-clientRow(data-href="/employee/details/"+wt.employeeId)
            -//    td #{i+1}
            -//    td(style='text-align:left') #{wt.name}
            -//    td(style='text-align:left') #{wt.vacation}
            -//    td(style='text-align:right') #{wt.weekends}
            -//    td(style='text-align:right') #{wt.redLetterDays}
            -//    td(style='text-align:right') #{wt.workHours}
    script(type='text/javascript', src='/bower_components/jquery/dist/jquery.min.js')
    script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    script(src='/bower_components/moment/min/moment-with-locales.js')    
    script(type='text/javascript', src='/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')                
    script(src='/js/workingtime.js')
    script.
      $(document).ready(function () {
        jQuery.noConflict();
        //$("#spinner").show();
        document.getElementById("loader").style.display = "block";
        document.getElementById("darktable").style.display = "none";
        $.get('/employee/worktimelist/'+moment().format('YYYY.MM.DD') , function(wtList) { 
          renderWorkingTimesTable(wtList);
          //$("#spinner").hide();
           document.getElementById("loader").style.display = "none";
           document.getElementById("darktable").style.display = "block";
        });	
        $("#mworkers").click();
        $("#listworktime").addClass("active");
        $('tr[data-href]').on("click", function() {
      document.location = $(this).data('href');
      });
      });