{% 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">
                    {{ 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 %}

<br>
<div style="font-family: FontAwesome;">
    Browse data challenges by data type, <a href="/data_domains">here</a>.
</div>
<br>

{% if problems|length > 0 %}
<div style="display: flex">
        <div>
            <p>User status</p>
            <ul class="fa-ul">
                <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">
                <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 %}
<ul>
{% for problem in problems %}
<li> <a href="/problems/{{ problem.name }}"><strong><font size="+1">{{ problem.title }}</font></strong></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>,
                participants = <strong><font color=darkgreen>{{ event.n_participants }}</font></strong>,
                submissions = <strong><font color=darkblue>{{ event.n_submissions }}</font></strong>,
                combined score = <strong><font color=firebrick>{{ event.combined_combined_valid_score_str }}</font></strong>,
                <a href="/event_plots/{{ event.name }}">score vs time plot</a></li>
        {% endif %}
    {% endfor %}
    </ul>
{% endfor %}
</ul>

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