{% extends 'base/base.html' %}

{% block title %} {% endblock %}
{% load index %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <!-- content goes here -->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <h1 id="page-header">Contest</h1>
                    </div>
                    <div class="col-md-12 table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-default">
                            <tr>
                                <th>Student</th>
                                <th>Title</th>
                                <th>Rank</th>
                                <th>Contest Id</th>
                                <th>Solved problems</th>
                                <th>Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for object in object_list %}
                                <tr class="click" onclick="window.location='{% url 'contest_detail' object.id %}';">
                                    <th scope="row">{{ object.user.first_name }} {{ object.user.last_name }}</th>
                                    <td><a href="{{ object.url }}">{{ object.title }}</a></td>
                                    <td>{{ object.ranking }}</td>
                                    <td>{{ object.contest_id }}</td>
                                    <td>{{ object.problems_solved }}</td>
                                    {% for i in range %}
                                                    {% ifequal object.date.month i %}
                                                    <td> {{ month|index:i }}, {{ object.date.year }}</td>
                                                {% endifequal %}
                                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'base/footer.html' %}
{% endblock %}

{% block css %}
    <style>
        #page-header {
            margin: 30px;
            text-align: center;
        }

        .container-fluid {
            margin: 0 6%;
        }

        .click {
            cursor: pointer;
        }
    </style>
{% endblock %}