<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Rounds Played</title>
        <meta name="Description" content="Insurgency games played on the AtlantisHQ">
        {% include "default_head_content.html" %}
    </head>
    <body class="bg-special">
        {% include 'navbar.html' %}
        <div class="container mt-3 mb-3" role="main">
            <table id="tableMain" class="table table-striped table-bordered table-sm" 
                    cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th class="th-sm font-weight-bold">Map</th>
                        <th class="th-sm font-weight-bold">Winner</th>
                        <th class="th-sm font-weight-bold">Duration</th>
                        <th class="th-sm font-weight-bold">Start Time</th>
                        <th class="th-sm font-weight-bold">Winner Prediction</th>
                        <th class="th-sm font-weight-bold">Prediction confidence</th>
                        <th class="th-sm font-weight-bold">Game-ID</th>
                    </tr>
                </thead>
                <tbody>
                {% for r in rounds %}
                    <tr>
                       <td>{{ r.mapName }}</td>
                       <td>{{ r.winnerSideString }}</td>
                       <td>{{ r.duration }}</td>
                       <td>{{ r.startTime.strftime('%d.%m.%Y %H:%M') }}</td>
                       <td 
                            {% if r.winnerSideString == r.prediction %}
                                style="color: green";
                            {% elif r.prediction != '-' %}
                                style="color: red";
                            {% endif %}
                         >
                         {{ r.prediction }}
                       </td>
                       <td>{{ r.confidence }}%</td>
                       <td><a href="/round-info?id={{ r.id }}">{{ r.id }}</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <script defer>
            $(document).ready(function () {
                $('#tableMain').DataTable({
                    "order" : [[ 6, "desc" ]]
                });
                $('.dataTables_length').addClass('bs-select');
            });
        </script>
        {% include 'footer.html' %}
    </body>
</html>
