{% extends "base.html" %}
{% block title %}Leaderboards{% endblock %}
{% block content %}


{% with messages = get_flashed_messages(with_categories=true) %}

{% if messages %}
    <div class="modal fade modal-warning" id="formerror" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    {% for category, message in messages %}
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{ category }}</h4>
                </div>
                <div class="modal-body">
                    {{ message }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
{% endif %}

{% endwith %}

<div class="page-title">
    <span class="title">{{ event.name }}</span>
</div>

<div class="col-xs-12 col-lg-12">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
          <div class="title">
              {{ leaderboard_title }}
          </div>
      </div>
    </div>
    <div class="card-body">
        <h4><font color="#F17670">
        {% if event.combined_combined_valid_score_str and event.is_open %}
            Combined score: {{ event.combined_combined_valid_score_str }}
        {% endif %}
        {% if event.combined_combined_test_score_str and (event.is_closed or private) %}
            <BR>Combined test score: {{ event.combined_combined_test_score_str }}
        {% endif %}
        </font></h4>
		
        <table id="leaderboard" class="display" cellspacing="0" width="100%">
          {{ leaderboard | safe}} 
	    </table>
    </div>
  </div>
</div>

{% if new_leaderboard %}
<div class="col-xs-6">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
          <div class="title">
              New submissions (pending training) 
          </div>
      </div>
    </div>
    <div class="card-body">
        <table class="table table-bordered">
          {{ new_leaderboard | safe}} 
	    </table>
    </div>
  </div>
</div>
{% endif %}
{% if failed_leaderboard %}
<div class="col-xs-6">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
          <div class="title">
              Failed submissions  
          </div>
      </div>
    </div>
    <div class="card-body">
        <table class="table table-bordered">
          {{ failed_leaderboard | safe}} 
	    </table>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
$(function () {
       $('#formerror').modal('toggle')
});

$(document).ready(function() {
        $('#leaderboard').DataTable({
             "order": [[ {{ sorting_column_index }}, "{{ sorting_direction }}" ]],
             "scrollX": true
             });
} );
</script>
{% endblock %}
