{% extends "layout.html" %}
{% block content %}

<h1>Přehled oceněných dárců</h1>

<div class="form-row">
    <div class="form-group col-md-3">
        <label for="year">Ocenění v roce:</label>
        <select name="year" id="year" class="form-control" onchange="refreshTable();">
            {% for year in years %}
            {% if year == "" %}
                <option value="0">Ve starém systému</option>
            {% else %}
                <option value="{{ year }}">{{ year }}</option>
            {% endif %}
            {% endfor %}
        </select>
    </div>
    <div class="form-group col-md-3">
        <label for="medal">Ocenění:</label>
        <select name="medal" id="medal" class="form-control" onchange="refreshTable();">
            {% for medal in all_medals %}
                <option value="{{ medal.slug }}">{{ medal.title }}</option>
            {% endfor %}
        </select>
    </div>
</div>

<table id="overview" class="table table-striped table-hovered table-hover">
    <thead class="thead-dark">
        <tr>
            {% for column_class, column_name in column_names.items() %}
            <th class="{{ column_class }}">{{ column_name }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

{% endblock %}

{% block js %}
<script src="/static/donors_override_highlight.js"></script>
<script type="text/javascript">
    {% include "donor/overview_table.js" %}

    function refreshTable() {
        let year = document.getElementById("year").value;
        let medal_slug = document.getElementById("medal").value;

        dataTable.ajax.url("{{ url_for('donor.overview_data')}}" + "/year/" + year + "/medal/" + medal_slug);
        dataTable.ajax.reload();
    }

    $(document).ready( function () {
        refreshTable();
    });

</script>
{% include "title_popup.html" %}
{% endblock %}
