{% import "includes/macros" as macros %}
{% extends "base" %}
{% block content %}
    <style>
	.dt-input {
		color: black;
	}
	.dt-selector {
		width: 70px;
	}
	.dt-table th{
	min-width: 100px;
	}
	.dt-table td {
		border: 1px gray solid;
	}
}
    </style>
    <div class="max-w-screen-lg w-full">
        <h1 class="h1">Bootsauswertung</h1>
        <div class="text-black dark:text-white">
            <table id="basic">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Ort</th>
                        {% for year in stat.pot_years | sort | reverse %}<th>{{ year }}</th>{% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for boat in stat.boats %}
                        <tr>
                            <td>{{ boat.name }}</td>
                            <td>{{ boat.location }}</td>
                            {% for year in stat.pot_years | sort | reverse %}
                                <td>
                                    {% if year~'' in boat.years %}
                                        {{ boat.years[year] }}
                                    {% else %}
                                        0
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <script src="/public/jstable.min.js"></script>
    <script>new JSTable("#basic", {
		perPage: 100,
		perPageSelect: [10,100],
		labels: {
			placeholder: 'Suchen (zB "Linz")'
		}
	});
    </script>
{% endblock content %}
