{% extends "base.html" %}
{% block title %}User{% 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">
        <div class="modal-message">
          {{ message }}
        </div>
      </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="col-xs-12">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <div class="title">Challenges</div>
      </div>
    </div>
    <div class="card-body">
      <p>Browse data challenges by data type, <a href="/data_domains">here</a>.</p>
      {% if problems|length > 0 %}
      <div style="display: flex">
        <div>
          <p>User status</p>
          <ul class="fa-ul problem-body">
            <li><span class="fa-li"><i class="fas fa-check-circle-o"></i></span> signed up</li>
            <li><span class="fa-li"><i class="fas fa-clock-o"></i></span> waiting for approval</li>
            <li><span class="fa-li"><i class="fas fa-circle-o"></i></span> not signed up </li>
          </ul>
        </div>
        <div>
          <p>Event status</p>
          <ul class="fa-ul problem-body">
            <li><span class="fa-li"><i class="fas fa-lock"></i></span> closed</li>
            <li><span class="fa-li"><i class="fas fa-hand-o-right"></i></span> competitive phase</li>
            <li><span class="fa-li"><i class="fas fa-handshake-o" aria-hidden="true"></i></span> collaborative phase
            </li>
          </ul>
        </div>
      </div>
      {% endif %}
    </div>
    <div class="card-body">
      {% for problem in problems %}
      <li class="item"> <a class="problem-title" href="/problems/{{ problem.name }}">{{ problem.title }}</a><br>
        <ul class="fa-ul">
          {% for event in problem.events %}
          {% if event.is_public %}
          {% if event.state_user == 'waiting' %}
          <li><span class="fa-li"><i class="fas fa-clock-o user-waiting"></i></span></li>
          {% elif event.state_user == 'signed' %}
          <li><span class="fa-li"><i class="fas fa-check-circle-o user-signed"></i></span></li>
          {% elif event.state_user == 'not_signed' %}
          <li><span class="fa-li"><i class="fas fa-circle-o user-not-signed"></i></span></li>
          {% endif %}
          {% if event.state == 'close' %}
          <li><span class="fas-li"><i class="fas fa-lock event-close"></i></span>
            {% elif event.state == 'collab' %}
          <li><span class="fas-li"><i class="fas fa-handshake-o event-collab" aria-hidden="true"></i></span>
            {% elif event.state == 'competitive' %}
          <li><span class="fas-li"><i class="fas fa-hand-o-right event-comp" aria-hidden="true"></i></span>
            {% endif %}
            <a href="/events/{{ event.name }}">{{ event.title }}</a>,
            <strong>
              <font color=darkgreen>{{ event.n_participants }}</font>
            </strong> participants,
            <strong>
              <font color=darkblue>{{ event.n_submissions }}</font>
            </strong> submissions,
            <!-- combined score = <strong><font color=firebrick>{{ event.combined_combined_valid_score_str }}</font></strong>, -->
            <a href="/event_plots/{{ event.name }}">Plot score vs time</a></li>
          {% endif %}
          {% endfor %}
        </ul>
        {% endfor %}
    </div>
  </div>
</div>

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