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