{% extends "pages/challenge_settings_base.html" %}
{% load user_profile_link from profiles %}
{% load url %}
{% load static %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a
                href="{% url 'challenges:list' %}">Challenges</a>
        </li>
        <li class="breadcrumb-item"><a
                href="{{ challenge.get_absolute_url }}">{% firstof challenge.title challenge.short_name %}</a></li>
        <li class="breadcrumb-item active"
            aria-current="page">Participation Requests</li>
    </ol>
{% endblock %}

{% block content %}

    <h2>Participation Requests for {{ challenge.short_name }}</h2>

    <div class="table-responsive">
        <table class="table table-hover table-borderless table-sm" id="participantsTable">
            <thead class="thead-light">
            <tr>
                <th>Created</th>
                <th>Updated</th>
                <th>Username</th>
                <th>Info</th>
                <th>Status</th>
                <th>Accept / Reject</th>
            </tr>
            </thead>
            <tbody>

            {% for regrequest in object_list %}

                <tr>
                    <td data-order="{{ regrequest.created|date:"U" }}">
                        {{ regrequest.created }}
                    </td>
                    <td data-order="{{ regrequest.changed|date:"U" }}">
                        {{ regrequest.changed }}
                    </td>
                    <td>
                        {{ regrequest.user|user_profile_link }}
                    </td>
                    <td>
                        {{ regrequest.user.user_profile.user_info }}
                    </td>
                    <td data-order="{{ regrequest.status }}">
                        {% if regrequest.status == regrequest.PENDING %}
                            <i class="far fa-hourglass" title="Pending"></i>
                        {% elif regrequest.status == regrequest.ACCEPTED %}
                            <i class="fas fa-check text-success"
                               title="Accepted"></i>
                        {% elif regrequest.status == regrequest.REJECTED %}
                            <i class="fas fa-times text-danger"
                               title="Rejected"></i>
                        {% endif %}
                    </td>
                    <td>
                        {% if regrequest.status != regrequest.ACCEPTED %}
                            <form method="post"
                                  action="{% url 'participants:registration-update' challenge_short_name=challenge.short_name pk=regrequest.pk %}">
                                {% csrf_token %}
                                <input type="hidden" name="status"
                                       value="{{ regrequest.ACCEPTED }}">
                                <button type="submit"
                                        class="btn btn-xs btn-success">Accept
                                </button>
                            </form>
                        {% endif %}
                        {% if regrequest.status != regrequest.REJECTED %}
                            <form method="post"
                                  action="{% url 'participants:registration-update' challenge_short_name=challenge.short_name pk=regrequest.pk %}">
                                {% csrf_token %}
                                <input type="hidden" name="status"
                                       value="{{ regrequest.REJECTED }}">
                                <button type="submit"
                                        class="btn btn-xs btn-danger">Reject
                                </button>
                            </form>
                        {% endif %}
                    </td>
                </tr>

            {% endfor %}

            </tbody>

        </table>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="module" src="{% static 'participants/js/registrationrequest_list.mjs' %}"></script>

{% endblock %}