<!DOCTYPE html>
<html lang="fr">
<head>
    <title>{{ report.title }}</title>
    <link rel="stylesheet" type="text/css" href="content/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="content/jquery-ui/jquery-ui.min.css"/>
	<link rel="stylesheet" type="text/css" href="content/DataTables/datatables.min.css"/>
	<link rel="stylesheet" type="text/css" href="content/datachecker.css"/>
	 
	<script type="text/javascript" src="content/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="content/jquery-ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="content/DataTables/datatables.min.js"></script>
	<script type="text/javascript" src="content/datachecker.js"> </script>
</head>
<body>
	<h1>{{ report.title }}</h1>

    {% for reportfile in report.report_files %}
    
        <h2>{{ reportfile.file }}</h2>
        
        {%- if reportfile.errors -%}
        	<ul>
		        {% for err in reportfile.errors %}
		        	<li class="fa fa-exclamation-circle error"> {{ err }}</li>
		        {% endfor %}
	        </ul>
        {% endif %}
        
        <table class="datatable cell-border display compact stripe">
        	<thead>
	       		<tr>
		       		<th>N°</th>
		       		<th>Valide</th>
		       		{% for header in reportfile.headers %}
		       			<th>{{ header }}</th>
		       		{% endfor %}
	       		</tr>
        	</thead>
        	<tbody>
       		{% for record in reportfile.records %}
       			<tr>
	       			<td>{{ record.index }}</td>
	       			<td>
	       				{%- if record.valid -%}
	       					<i class="fa fa-check valid"></i>
	       				{% else %}
	       					<i class="fa fa-times error"></i>
	       				{% endif %}
	       			</td>
       			
	       			{% for field in record.fields %}
	       				{%- if field.valid -%}
							<td>{{ field.value }}</td>
						{% else %}
							<td class="error" title="{{ field.error }}"><i class="fa fa-exclamation-circle"></i> <span>{{ field.value }}</span></td>
						{% endif %}
					{% endfor %}
       			</tr>
       		{% endfor %}
        	</tbody>
        </table>
    {% endfor %}
</body>

</html>