{% block body %}
<body>
 

  <header>
     <table style="width: 100%; margin-top: 8px;">
       <tbody>
	       <tr>
	       
		      <td style="width: 100%; text-align: center;">
		
               <p><strong style="font-size:25px;">Cross World Group</strong> <br> <b style="font-size:20px;"> HR & OD Department</b> <br> <span style="font-size:20px;"> LEAVE APPLICATION FORM </span> </p>
    	
	      	</td>
   
	     </tr>
       
	   </tbody>
  
    </table>
  </header>

  <main>
   <table style="width: 100%;">
     
    <tbody>
     {% for leaveInfo in leaveInfos %}
	    <tr>
	       <td style="width: 15%;">        
           PIN 
	    	</td>
            <td style="width: 5%;">
                    :
            </td>
		   <td style="width: 80%;">		     
                {{ leaveInfo.Emp_Id }}
		   </td>
    
	    </tr>
         <tr>
	       <td>        
           Name 
	    	</td>
            <td>
                    :
            </td>
		   <td>		     
                {{ leaveInfo.Emp_Name }}
		   </td>
    
	    </tr>

         <tr>
	       <td>        
           Department 
	    	</td>
            <td>
                    :
            </td>
		   <td>		     
                {{ leaveInfo.Department }}
		   </td>
    
	    </tr>
         <tr>
	       <td>        
           Designation 
	    	</td>
            <td>
                    :
            </td>
		   <td>		     
                {{ leaveInfo.Designation }}
		   </td>
    
	    </tr>
         <tr>
	       <td>        
           Joining Date 
	    	</td>
            <td>
                    :
            </td>
		   <td>		     
                {{ leaveInfo.JoiningDate|date('d-m-Y') }}
		   </td>
    
	    </tr>
        <tr>
	       <td>        
          Company
	    	</td>
            <td>
                    :
            </td>
		   <td>		     
                {{ leaveInfo.Company }}
		   </td>
    
	    </tr>
    {% endfor %}
  	</tbody>
 
</table>

<br><br>
 <table style="width: 100%;">
     
    <tbody>
    
	    <tr>
	       <td style="width: 15%;">        
           Leave 
	    	</td>
           
		   <td style="width: 20%;">	
          <u>	     
              {{ leaveApplication.leavename.name }}
          </u>
		   </td>
      <td>        
           For
	    	</td>
      <td>
      {% set difference = date(leaveApplication.toDays).diff(date(leaveApplication.fromDays))%}
    
      {% set leftDays = difference.days %}
        <u>
      {% if leaveApplication.fromDays == leaveApplication.toDays %}
            1 Days
      {% else %}
          {{ leftDays + 1 }} Days
      {% endif %}          		     
        </u>
		   </td>

       <td>
        From / On: <u> {{ leaveApplication.fromDays|date('d-m-Y') }} </u>
       </td>
        <td>
        To: <u> {{ leaveApplication.toDays|date('d-m-Y') }} </u>
       </td>


	    </tr>

      <tr>
	      <td>        
          Reason
	    	</td>           
		   <td colspan="5">		     
          <u> {{ leaveApplication.reasons }} </u>
		   </td>
    
	    </tr>
        
  	</tbody>
 
</table>
<hr>
<table style="width: 100%; margin-top:8px;">
				<tbody>         
              <tr>
              <td style="width: 70%;">Address While on Leave : {{ leaveApplication.address }} </td>
              <td style="width: 30%;">  </td>                  		
              </tr>    

              <tr>
              <td style="width: 70%;">Contact Phone No : {{ leaveApplication.contactNo }} </td>
              <td style="width: 30%;">  </td>                  		
              </tr>          
        </tbody>
	</table>
  <hr>

  
<table style="width: 100%; margin-top:8px;">
    <thead>
    <tr>
        <th style="width: 25%;">
       
        </th>
        <th style="width: 25%;">
        CL (days) as on
        </th>
        <th style="width: 25%;">
        SL (days) as on
        </th>
        <th style="width: 25%;">
        AL (days) as on
        </th>
      
    </tr>
    </thead>
    <tbody>
        {% for leaveInfo in leaveInfos %}
           
            <tr>
                <td> At credit</td>
                <td style="text-align:center;">{{ leaveInfo.CasualLeave }} </td>
                <td style="text-align:center;">{{ leaveInfo.SickLeave }} </td>
                <td style="text-align:center;">{{ leaveInfo.AnnualLeave }} </td>                              
            </tr>
           
        {% else %}
            <tr>
            <td colspan="5">No records found</td>
            </tr>
        {% endfor %}
                
    </tbody>
</table>

<table style="width: 100%; margin-top:30px;">
    <thead>
    <tr>
        <th style="width: 50%; text-align:left;">  
          {% if approvalStep == 1 %}      
            <a href ="{{ recommendedUrl }}">Recommended</a> / <a href ="{{ notRecommendedUrl }}">Not Recommended</a>   
          {% else %}
              {% if functionalHeadObj is not null %}
                Recommended By<br>
                {{ functionalHeadObj.fullName }}
              {% endif %}
          {% endif %}
          <br>---------------<br>
          Signature<br>
          Functional Head
        </th>
        <th style="width: 50%;  text-align:right;">
        {% if approvalStep == 2 %}  
          <a href ="{{ approvalUrl }}">Approved</a> / <a href ="{{ notApprovalUrl }}">Not Approved</a> 
        {% endif %}
        <br>---------------<br>
          Signature<br>
          Department Head
        </th>
             
    </tr>
    </thead>
</table>

  </main>
</body>
{% endblock %}

<style>
  @page { 
    margin: 100px 30px 80px 30px; 
    font-size: 10px;
    }
  .table-bordered{page-break-before:avoid}
    /** Define the header rules **/
    header { 
      position: fixed; 
      top: -100px; 
      left: 0px; 
      right: 0px; 
    /**  background-color: lightblue; **/
      height: 90px; 
      border-bottom:1px solid gray;
      }
    /** Define the footer rules **/
    footer { 
      position: fixed; 
      bottom: -60px; 
      left: 0px; 
      right: 0px; 
    /**  background-color: lightblue; **/
      height: 45px; 
      text-align: center;
      border-top:1px solid gray;
      }
   
    footer .page:after { 
	     content: counter(page); 
      } 
    
    p { 
      page-break-after: auto; 
      }
    p:last-child { 
      page-break-after: never; 
      }

table, td, th {
  border: 1px solid;
}

table {
  width: 100%;
  border-collapse: collapse;
}

 {# .table-bordered {
    border-left: 0em solid #ccc;
    border-right: 0;
    border-top: 0.01em solid #ccc;
    border-bottom: 0;
    border-collapse: collapse;
}

.table-bordered tr th,
.table-bordered tr td {
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 3px;
}

.table-bordered tr th:first-child,
.table-bordered tr td:first-child {
  border-left: 1px solid #bbb;
}

.table-bordered td,
.table-bordered th {
    border-left: 0;
    border-right: 0.01em solid #ccc;
    border-top: 0;
    border-bottom: 0.01em solid #ccc;
} #}

</style>