{% extends "base.html" %}
{% load url %}
{% load crispy_forms_tags %}
{% load static %}
{% load naturaldelta %}
{% load user_profile_link from profiles %}

{% block title %}Challenge requests{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'challenges:list' %}">Challenges</a></li>
        <li class="breadcrumb-item active">{% if not perms.challenges.change_challengerequest %}Your{% endif %} Challenge Requests</li>
    </ol>
{% endblock %}

{% block content %}
    <h2>{% if not perms.challenges.change_challengerequest %}Your{% endif %} Challenge Requests</h2>
    <div class="table-responsive">
        <table class="table table-hover table-borderless table-sm" id="challengeRequestsTable">
            <thead class="thead-light">
            <tr>
                <th class="datatables-non-sortable"></th>
                <th class="text-center">Acronym</th>
                <th class="text-center">Creator</th>
                <th class="text-center">Submission date</th>
                <th class="text-center">Status</th>
                <th class="text-center">Contact</th>
            </tr>
            </thead>
            <tbody>
                {% for object in object_list %}
                    <tr>
                        <td class="text-center align-middle">
                            <a class="btn btn-dark btn-sm" href="{% url 'challenges:requests-detail' pk=object.pk %}"><i class="fa fa-book pr-2"></i>Details</a>
                        </td>
                        <td class="text-center align-middle">{{ object.short_name }}</td>
                        <td class="text-center align-middle">{{ object.creator|user_profile_link }}</td>
                        {% if object.status == object.ChallengeRequestStatusChoices.ACCEPTED %}
                            <td class="text-center align-middle" data-order="{{ object.created|date:'U' }}"><span class="badge p-2 badge-primary">{{ object.created|date:'F j, Y' }}</span></td>
                            <td class="text-center align-middle"><span class="badge p-2 badge-success">Accepted</span></td>
                        {% elif object.status == object.ChallengeRequestStatusChoices.REJECTED %}
                            <td class="text-center align-middle" data-order="{{ object.created|date:'U' }}"><span class="badge p-2 badge-primary">{{ object.created|date:'F j, Y' }}</span></td>
                            <td class="text-center align-middle"><span class="badge p-2 badge-danger">Rejected</span></td>
                        {% else %}
                            <td class="text-center align-middle" data-order="{{ object.created|date:'U' }}"><span class="badge p-2 {% if object.created|timedifference < 8 %} badge-success {% elif object.created|timedifference < 15 %} badge-warning {% else %} badge-danger {% endif %}">{{ object.created|date:'F j, Y' }}</span></td>
                            <td class="text-center align-middle">
                            {% if perms.challenges.change_challengerequest %}
                                <a class="btn btn-primary btn-sm" hx-get="{% url 'challenges:requests-status-update' pk=object.pk %}" hx-swap="outerHTML">Accept or decline</a>
                            {% else %}
                                <span class="badge p-2 badge-light">Pending</span>
                            {% endif %}
                            </td>
                        {% endif %}
                        <td class="text-center align-middle"><a href="mailto:{{ object.contact_email }}"> {{ object.contact_email }}</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}


{% block script %}
    {{ block.super }}
    <script type="module" src="{% static 'js/challenges/challengerequest_list_table.mjs' %}"></script>
{% endblock %}