{% extends 'student/base.html' %}
{% load i18n %}
{% load humanize %}
{% load custom_filters %}

{% block details %}
   <div class="container mt-4">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5>{% translate "Student Titles Management" %}</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">{% translate "This is a list of all the members who need student titles applied to them." %}</p>
                <p class="text-muted">{% translate "To process each character, add them to Student title in game, then click the Apply title below. For 24 hours they will remain at the bottom of the list so you can unapply the title on a mistake." %}</p>
                <p class="text-muted">{% translate "Each table is limited to " %} {{ limit }} {% translate "enteries" %}</p>

                <!-- Table for Members Without Title -->
                <h6 class="mt-4">{% translate "Members Without Title" %}</h6>
                <div class="table-responsive">
                    <table class="table table-striped align-middle">
                        <thead class="table-light">
                            <tr>
                                <th scope="col">{% translate "Name" %}</th>
                                <th scope="col">{% translate "Joined Date" %}</th>
                                <th scope="col">{% translate "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if members_without_title %}
                                {% for member in members_without_title %}
                                    <tr>
                                        <td>{{ member.member.character_name }}</td>
                                        <td>{{ member.created_date|date:"SHORT_DATE_FORMAT" }}</td>
                                        <td>
                                            <form action="{% url 'student:apply_title' member.id %}" method="post" class="d-inline">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-success btn-sm">
                                                    {% translate "Apply Title" %}
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="3" class="text-center text-muted">{% translate "No members to show." %}</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>

                <!-- Table for Members With Title -->
                <h6 class="mt-4">{% translate "Members With Title" %}</h6>
                <div class="table-responsive">
                    <table class="table table-striped align-middle">
                        <thead class="table-light">
                            <tr>
                                <th scope="col">{% translate "Name" %}</th>
                                <th scope="col">{% translate "Joined Date" %}</th>
                                <th scope="col">{% translate "Status" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if members_with_title %}
                                {% for member in members_with_title %}
                                    <tr class="table-success">
                                        <td>{{ member.member.character_name }}</td>
                                        <td>{{ member.created_date|date:"SHORT_DATE_FORMAT" }}</td>
                                        <td>
                                            <form action="{% url 'student:undo_title' member.id %}" method="post" class="d-inline">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-danger btn-sm">
                                                    {% translate "Undo Title" %}
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="3" class="text-center text-muted">{% translate "No members to show." %}</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}

{% endblock %}

{% block extra_css %}
<style>
    .table-success {
        background-color: #d4edda !important;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
</style>
{% endblock %}
