{% extends "titles/idac/frontend/idac_index.jinja" %}
{% block tab %}

<div class="tab-content" id="nav-tabContent">
    <!-- Ranking -->
    <div class="tab-pane fade show active" id="nav-ranking" role="tabpanel" aria-labelledby="nav-ranking-tab"
        tabindex="0">
        <div class="row justify-content-md-center form-signin">
            <div class="col col-lg-4">
                <select class="form-select mb-3" id="course-select">
                    <option value="0" selected disabled>Loading Courses...</option>
                </select>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div id="table-ranking">
                    <div class="text-center">Loading Ranking...</div>
                </div>
            </div>
        </div>
        <div id="pagination-ranking"></div>
    </div>
</div>

<script type="text/javascript">
    {% include "titles/idac/frontend/ranking/js/scripts.js" %}
</script>

{% endblock tab %}