<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Relatório</title>
    <style type="text/css">
    	body{
		  -webkit-print-color-adjust:exact;
		}

		table {
		 border-collapse:collapse;
		 border-spacing:0;
		}
		.outer {
		  display: block;
		  width: 100%;
		  overflow-x: auto;
		  min-height: 0.01%;
		  border-top: 1px solid #ddd;
		  margin-top: -1px;
		}

		@media screen and (max-width: 767px) {
		  .outer {
		    margin-bottom: 15px;
		    overflow-y: hidden;
		    -ms-overflow-style: -ms-autohiding-scrollbar;
		  }
		  .outer > table {
		    margin-bottom: 0;
		  }

		}
		.right {
		  text-align: right;
		}
		.center {
		  text-align: center;
		}
		.paneltable {
		  padding: 0;
		}
		table {
		  border: none;
		  width: 100%;
		}
		table.border td,
		table.border th {
		  border-left: 1px solid;
		  border-color: #DDDDDD;
		}
		table.border td:nth-of-type(1),
		table.border th:nth-of-type(1) {
		  border-left: none;
		}
		table.inverted {
		  background: #e6e4e4;
		}
		table.inverted td,
		table.inverted th,
		table.inverted tfoot,
		table.inverted tbody tr td,
		table.inverted tbody tr:nth-of-type(1) td {
		  border-color: white;
		}
		table.inverted tfoot {
		  background: #cdcaca;
		}
		table.inverted.fancy thead th {
		  background: #5d5d5d;
		  color: white;
		  border-bottom: 2px solid white;
		  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		}
		table.fancy thead th {
		  color: #5d5d5d;
		  text-shadow: -1px 0 #5d5d5d;
		  border-bottom: 2px solid #5d5d5d;
		}
		table.striped tbody tr:nth-child(odd) {
		  background: #EFEFEF;
		}
		table tr td,
		table tr th {
		  padding: 5px 10px;
		  font-size: 14px;
		  font-family: 'Arial';
		  color: #5d5d5d;
		  text-align: left;
		}
		table tr td:first-child,
		table tr th:first-child {
		  padding-left: 20px;
		}
		table tr td:last-child,
		table tr th:last-child {
		  padding-right: 20px;
		}
		table tbody tr td {
		  border-bottom: 1px solid #DDDDDD;
		}
		table tbody tr:nth-of-type(1) td {
		  border-top: none;
		}
		table thead {
		  font-family: 'Arial';
		  font-size: 14px;
		  color: #5d5d5d;
		  text-shadow: -1px 0 #5d5d5d;
		}
		table thead th {
		  padding: 15px 10px;
		  border-bottom: 2px solid;
		  border-color: #DDDDDD;
		}
		table tfoot {
		  background: #f3f3f3;
		  border-bottom: 1px solid #ddd;
		}
		table .btn-actions {
		  display: table;
		  margin: 0 auto;
		  margin-right: 0;
		}
		@media (max-width: 992px) {
		  table .btn-actions {
		    width: 100px;
		  }
		}
		@-moz-document url-prefix() {
		  table .btn-actions {
		    width: 105px;
		  }
		}
		table .btn-actions .btn {
		  display: inline-block;
		  width: 26px;
		  height: 26px;
		  border: 2px solid #E0E0E0;
		  background: white;
		  margin-right: 10px;
		  -webkit-border-radius: 100%;
		  -moz-border-radius: 100%;
		  border-radius: 100%;
		  color: #5d5d5d;
		  padding: 0 0 0 1px;
		  font-size: 14px;
		  -webkit-transition: 0.2s;
		  -moz-transition: 0.2s;
		  -ms-transition: 0.2s;
		  -o-transition: 0.2s;
		  transition: 0.2s;
		}
		table .btn-actions .btn:last-child {
		  margin-right: 0;
		}
		table .btn-actions .btn:hover {
		  background: #5d5d5d;
		  border-color: #5d5d5d;
		}
		table .btn-actions .btn:hover i:before {
		  color: white;
		}
		table .btn-actions .btn:after {
		  background: transparent;
		}
		table-filter input:focus,
		.panel-filter input:focus {
		  border-color: #5d5d5d;
		  background-color: white;
		}
		table-filter .filter-tag,
		.panel-filter .filter-tag {
		  display: inline-block;
		  margin-right: 8px;
		  margin-top: 15px;
		  background: rgba(0, 0, 0, 0.1);
		  padding: 6px 10px 4px;
		  padding-right: 35px;
		  -webkit-border-radius: 14px;
		  -moz-border-radius: 14px;
		  border-radius: 14px;
		  color: #5d5d5d;
		  position: relative;
		  overflow: hidden;
		  -webkit-transition: 0.2s;
		  -moz-transition: 0.2s;
		  -ms-transition: 0.2s;
		  -o-transition: 0.2s;
		  transition: 0.2s;
		  font-size: 13px;
		}
		table-filter .filter-tag:last-child,
		.panel-filter .filter-tag:last-child {
		  margin-right: 0;
		}
		table-filter .filter-tag .remove,
		.panel-filter .filter-tag .remove {
		  cursor: pointer;
		  position: absolute;
		  width: 20px;
		  height: 20px;
		  background: rgba(0, 0, 0, 0.2);
		  color: white;
		  -webkit-border-radius: 100%;
		  -moz-border-radius: 100%;
		  border-radius: 100%;
		  top: 4px;
		  right: 4px;
		  padding: 2px 0;
		  text-align: center;
		  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
		  font-size: 14px;
		}
		table-filter .filter-tag.removed,
		.panel-filter .filter-tag.removed {
		  display: none;
		}
		table-filter {
		  display: block;
		  padding: 0 20px 20px 20px;
		  background: #ececec;
		  position: relative;
		}
		table-filter input:focus {
		  background: #fcfcfc;
		}
    </style>
</head>

<body>

	<div class="outer">
	    
	    <button onclick="window.print();">Clique aqui para Imprimir</button>
	    <h3 th:text="${data.nomeEntidade}">Entidade</h3>
	    <h4 th:text="${data.reportTitle}">Titulo</h4>
	    <h5 th:text="${data.reportSubTitle}">SubTitulo</h5> 
        <H5 th:text="${data.maxRecordExcedido}">Excedeu registro</H5> 
		<table class="border inverted fancy striped">
            <thead>
				<tr>
                    <th th:each="column : ${data.headerFields}" th:text="${column}"></th>
				</tr>
			</thead>

			<tbody>
				<tr th:each="item : ${data.items}">
                    <td th:each="column : ${data.fields}" th:text="${{item?.__${#strings.replace(column.fieldFullPath, '.', '?.')}__}}">
                    </td>
				</tr>
				<tr class="inverted fancy tfoot">
                    <th th:each="column : ${data.sumFieldsValue}" th:text="${column}"></th>
				</tr>			
			</tbody>
		</table>
	    <h5 th:text="${data.horaGeracao}">Hora Geração</h5>
	</div>
</body>
</html>
