link(rel='stylesheet', type='text/css', href='https://unpkg.com/lightpick@latest/css/lightpick.css')
#oilChangeModal.fade.modal(tabindex='-1', 
    role='dialog', 
    aria-labelledby='oilChangeModalLabel', 
    aria-hidden='true',

    )
  //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
  .modal-dialog(role='document', style='width:720px')
    .modal-content
      .modal-header#oilChangeHeader.bg-primary(style="background: Primary")
        h4#vehicleId.modal-title Olaj csere időpontok
      .modal-body(style='background-color:#4f5b69')
        .container(style='width:100%;')
            #darktable.container
                table#oilChangeTable(style='width:100%;')
                    col(width='2%')
                    col(width='10%')
                    col(width='10%')

                    thead
                        tr
                            th
                                h1(style='text-align:right') #
                            th
                                h1(style='text-align:center') Időpont
                            th
                                h1(style='text-align:center') Kilométer óra állás
                    tbody
          
      .modal-footer(style="background-color: #2C3446")
          button.btn.btn-primary(type='button', data-dismiss='modal') 
            i.fa.fa-arrow-left
            |  | Bezár
          button.btn.btn-primary(data-toggle='modal',data-dismiss='modal',data-target='#oilChangeNewModal',style='width:40px;',type='button')
            i.fa.fa-tint
    //-script(src='/bower_components/jquery/dist/jquery.js')  
    //-script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    //-script(src='https://unpkg.com/lightpick@latest/lightpick.js')
    
script.

  $(document).on('show.bs.modal','#oilChangeModal', function () {
          // Generate Table

          var createOilChangeTable=function (data){
              var sum=0;
              var consumption=0;
              $('#oilChangeTable > tbody').empty();
              if (data)
              {
                  $.each(data.oilChangeLast,function(i,el){
                      var newRow=$('<tr class="clickable-row" id='+el._id+' data-href=/employee/detailstemp/'+el._id+'>"'+//);
                      '<td style="text-align:right">'+(i+1)+'</td>'+
                      '<td style="text-align:center">'+moment(el.dateTime).format("YYYY.MM.DD")+'</td>'+
                      '<td style="text-align:center">'+el.kilometer.toLocaleString('hu-HU')+' km'+'</td>'+
                      '</tr>');
                      $('#oilChangeTable > tbody:last-child').append (newRow);
                  })
              }
          }
        //- Olajcsere modal
       // $('#oilChangeModal').on('show.bs.modal', function () {
  
          $(this).find('form').trigger('reset');
          var getIdFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-id')//$(event.target).closest('tr').data('id');
          var getVidFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-vid');//$(event.target).closest('tr').data('vid');
          var getVnameFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-name');//$(event.target).closest('tr').data('name');
          $('#vehicleId').val(getIdFromRow); 
              //-$("#fuelingHeader").html(getIdFromRow); 
          $(this).find('#vehicleId').html($('<b> Olaj csere: '+ getVnameFromRow  + '</b> <b style="float:right">'+getVidFromRow+'</b>' ))
          $.get('/vehicles/api/getVehicle/'+getIdFromRow,function(data)
            {
              createOilChangeTable(data)
            $('#oilChangeLast').val(data.oilChangeLast);
            })  

     //   })
  })

  $(document).ready(
    function() {

    }
    );